Bootstrap 切换仅显示列表中的第一个元素
Bootstrap toggle brings up only the first element in the list
我使用 bootstrap 开关制作了以下导航菜单,其中仅显示列表的第一个元素,无论它是哪个。我尝试用另一个元素替换第一个元素,我得到了相同的行为,所以这让我相信 html 代码正在工作。
<a href="#getting-started" class="list-group-item list-group-item-
success" data-toggle="collapse" data-parent="#admin-menu"><span></span><i
class="fa fa-tachometer fa-lg" aria-hidden="true"></i>Getting Started<i
class="fa fa-caret-down"></i></a>
<div class="collapse sp" id="getting-started">
<a class="navlink list-group-item" href="software.html">General
Information</a>
<a class="navlink list-group-item"
href="install_linux.html">Linux Installation</a>
<a class="navlink list-group-item"
href="install_win.html">Windows Installation</a>
<a class="navlink list-group-item" href="install_mac.html">Mac
Installation</a>
<a class="navlink list-group-item"
href="install_docker.html">Docker Installation</a>
<a class="navlink list-group-item"
href="lang_installation.html">Installing Languages</a>
<a class="navlink list-group-item" href="login.html">Login</a>
<a class="navlink list-group-item"
href="license.html">License</a>
<a class="navlink list-group-item"
href="releasenotes.html">Release notes</a>
</div>
我加载 boostrap.js jquery 并且我使用的脚本适用于不同的站点。或者,如果您知道我在哪里可以找到用于在左侧站点上显示带有菜单的在线手册的脚本。为了检查行为,请访问 https://www.dialtrix24.com/test/doc/index.html,您可以在左侧找到它。页面未填充,但脚本仅切换“入门”部分,其他较低部分不起作用。
这是js脚本的一部分:
//Navigation slide animation
$( document).ready(function() {
var str = document.URL;
var address = str.substring(str.lastIndexOf('/')+1);
// address = address.replace(/[0-9]/g, '');
$('a[href="'+address +'"]').addClass('currentPage');
$('a[href="'+address+'"]').parent('div').addClass('in').addClass('heightTest').prev ().find('.fa-lg').css( "color", "#c70000" );
//$('a[href="'+address+'"]').parent('li').addClass('heightTest');
$('a[href="'+address+'"]').parent('li').parent('ul').parent('div').parent('div').addClass('heightTest').addClass ('in').parent('div').addClass('heightTest').addClass('in').prev().find('.fa-lg').css( "color", "#c70000" );
$('.blur').click(function(e){
$(".navbar-inverse").toggleClass('whiteColor');
$('.fa- chevron-right').toggleClass('rotate1');
});
var doc_links =
[
//Getting Started----------------------------------------------
{
"name":"General Information",
"link": "software",
"type": "docs",
"data": ""
},
{
"name":"Linux Installation",
"link": "install_linux",
"type": "docs",
"data": ""
},
等等
谢谢
问题已解决,因为它与包含锚点的 div 偏移了 75 像素,因此我添加了相对位置和 z-index 1,现在它可以正常工作了。
我使用 bootstrap 开关制作了以下导航菜单,其中仅显示列表的第一个元素,无论它是哪个。我尝试用另一个元素替换第一个元素,我得到了相同的行为,所以这让我相信 html 代码正在工作。
<a href="#getting-started" class="list-group-item list-group-item-
success" data-toggle="collapse" data-parent="#admin-menu"><span></span><i
class="fa fa-tachometer fa-lg" aria-hidden="true"></i>Getting Started<i
class="fa fa-caret-down"></i></a>
<div class="collapse sp" id="getting-started">
<a class="navlink list-group-item" href="software.html">General
Information</a>
<a class="navlink list-group-item"
href="install_linux.html">Linux Installation</a>
<a class="navlink list-group-item"
href="install_win.html">Windows Installation</a>
<a class="navlink list-group-item" href="install_mac.html">Mac
Installation</a>
<a class="navlink list-group-item"
href="install_docker.html">Docker Installation</a>
<a class="navlink list-group-item"
href="lang_installation.html">Installing Languages</a>
<a class="navlink list-group-item" href="login.html">Login</a>
<a class="navlink list-group-item"
href="license.html">License</a>
<a class="navlink list-group-item"
href="releasenotes.html">Release notes</a>
</div>
我加载 boostrap.js jquery 并且我使用的脚本适用于不同的站点。或者,如果您知道我在哪里可以找到用于在左侧站点上显示带有菜单的在线手册的脚本。为了检查行为,请访问 https://www.dialtrix24.com/test/doc/index.html,您可以在左侧找到它。页面未填充,但脚本仅切换“入门”部分,其他较低部分不起作用。
这是js脚本的一部分:
//Navigation slide animation
$( document).ready(function() {
var str = document.URL;
var address = str.substring(str.lastIndexOf('/')+1);
// address = address.replace(/[0-9]/g, '');
$('a[href="'+address +'"]').addClass('currentPage');
$('a[href="'+address+'"]').parent('div').addClass('in').addClass('heightTest').prev ().find('.fa-lg').css( "color", "#c70000" );
//$('a[href="'+address+'"]').parent('li').addClass('heightTest');
$('a[href="'+address+'"]').parent('li').parent('ul').parent('div').parent('div').addClass('heightTest').addClass ('in').parent('div').addClass('heightTest').addClass('in').prev().find('.fa-lg').css( "color", "#c70000" );
$('.blur').click(function(e){
$(".navbar-inverse").toggleClass('whiteColor');
$('.fa- chevron-right').toggleClass('rotate1');
});
var doc_links =
[
//Getting Started----------------------------------------------
{
"name":"General Information",
"link": "software",
"type": "docs",
"data": ""
},
{
"name":"Linux Installation",
"link": "install_linux",
"type": "docs",
"data": ""
},
等等
谢谢
问题已解决,因为它与包含锚点的 div 偏移了 75 像素,因此我添加了相对位置和 z-index 1,现在它可以正常工作了。