Question

我的网页上有响应式下拉列表。适用于台式机/笔记本电脑浏览器。但是，当您使用屏幕较小的手机或ipad时，单击应显示另一个下拉菜单的链接后，导航将被隐藏。

这是js功能。 -

$('.navbar-collapse a').click(function(){
    $(".navbar-collapse").collapse('hide');
});

和html -

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a href="#home"><img src="images/Logo-banner.jpg" height="auto" width="auto" /></a>
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon icon-bar"></span>
                    <span class="icon icon-bar"></span>
                    <span class="icon icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right text-uppercase">
                    <li><a href="#home">Home</a></li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle ddown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
                        <ul class="dropdown-menu scrollable-menu" role="menu">
                            <li><a href="#computer-tablet-phone-service">Computer, Tablet &amp Phone Services</a></li>
                            <li><a href="#on-site-service">On Site Services</a></li>
                            <li><a href="#remote-service">Remote Services</a></li>
                            <li><a href="#managed-services">Managed Services</a></li>
                            <li><a href="#data">Data Backup Services</a></li>
                            <li><a href="#surveillance">Surveillance Systems</a></li>
                            <li><a href="#computer-sales">New &amp Used Computer Sales</a></li>
                            <li><a href="#custom-pcs">Custom Built Computers</a></li>
                            <li><a href="#voip">VOIP Phones</a></li>
                            <li><a href="#web-design">Web Design &amp Hosting</a></li>
                        </ul>
                    </li>
                    <li><a href="/upload/index.php">Shop Online</a></li>
                    <!--<li><a href="#pricing">About</a></li>-->
                    <li><a href="#download">Download</a></li>
                    <!--<li><a href="#download">Contact</a></li>-->
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

我认为我必须做的是在js中创建一个条件，如果它属于某个类，则不会执行hide函数。我真的不喜欢js。这是我尝试过的。

$('.navbar-collapse a').click(function(){
    if(!$(this).hasClass("ddown")) {
        $(".navbar-collapse").collapse('hide');}
});

任何提示？建议？解决方案？有人看过这个吗？

Answer 1

对于任何在bootstrap响应下拉列表中遇到相同问题的人，在此处单击父导航菜单后自动关闭是解决方案。

在您点击的链接上添加一个类，该链接将下拉菜单，将其命名为您想要的任何名称（我将其命名为＆＃34; ddown）：

<ul class="nav navbar-nav navbar-right text-uppercase">
                    <li><a href="#home">Home</a></li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle ddown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
                        <ul class="dropdown-menu scrollable-menu" role="menu">
                            <li><a href="#computer-tablet-phone-service">Computer, Tablet &amp Phone Services</a></li>
                            <li><a href="#on-site-service">On Site Services</a></li>
                            <li><a href="#remote-service">Remote Services</a></li>
                            <li><a href="#managed-services">Managed Services</a></li>
                            <li><a href="#data">Data Backup Services</a></li>
                            <li><a href="#surveillance">Surveillance Systems</a></li>
                            <li><a href="#computer-sales">New &amp Used Computer Sales</a></li>
                            <li><a href="#custom-pcs">Custom Built Computers</a></li>
                            <li><a href="#voip">VOIP Phones</a></li>
                            <li><a href="#web-design">Web Design &amp Hosting</a></li>
                        </ul>
                    </li>
                    <li><a href="/upload/index.php">Shop Online</a></li>

然后将此if添加到javascript中的导航栏功能：

$('.navbar-collapse a').click(function(){
if($(this).hasClass("ddown")) {
    event.preventDefault();}
    else {
        $(".navbar-collapse").collapse('hide');
    }
});

这就是它，祝你好运。

如果条件使用停止折叠的jquery（＆＃39;隐藏＆＃39;）函数 - Bootstrap 3

1 个答案: