引導導航欄切換不適用於移動設備

Question

我有一個JSfiffle

    <ul class="dropdown-menu">
    <li>
        <a href="/camera-photo">
            Camera &amp; photo
        </a>
    </li>
    <li>
        <a href="/cell-phones">
            Cell phones
        </a>
    </li>
    <li>
        <a href="/others">
            Others
        </a>
    </li>
    </ul>

</li>
<li>
    <a  href="/apparel">
        Apparel
    </a>
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        &nbsp;<i class="fa fa-angle-down"></i>

    </a>

    <ul class="dropdown-menu">
    <li>
        <a href="/shoes">
            Shoes
        </a>
    </li>
    <li>
        <a href="/clothing">
            Clothing
        </a>
    </li>
    <li>
        <a href="/accessories">
            Accessories
        </a>
    </li>
    </ul>

</li>
    <li>
        <a href="/digital-downloads">
            Digital downloads
        </a>
    </li>
    <li>
        <a href="/books">
            Books
        </a>
    </li>
    <li>
        <a href="/jewelry">
            Jewelry
        </a>
    </li>
    <li>
        <a href="/gift-cards">
            Gift Cards
        </a>
    </li>


        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <form action="/search" method="get" onsubmit="return check_small_search_form()">    <div class="search_box pull-right">
    <input type="text"  id="small-searchterms"  autocomplete="off"
                value="Search store" name="q"  onfocus="if(this.value=='Search store')this.value=''" onblur="if(this.value=='') {this.value = 'Search store';}" />
</div>

預期的行為是這樣的。

1當我單擊任何父類別文本（例如計算機）時，它應將我帶到類別頁面。 2當我單擊類別的向下箭頭時，它應該展開並顯示子類別項

它們都工作正常，但是現在我想將向下箭頭右移，向元素應用style =“ float：right”。 但是現在我的預期行為2被破壞了，這使我進入了相應的頁面而不是擴展子類別項。

我在這里做錯了什么？

Answer 1

通過將字體真棒圖標浮動到右側而不是實際的標簽，我可以使用它。 唯一的事情是我無法擺脫底部的填充。 也許你想要在那里？ https://jsfiddle.net/RachGal/zuer7g75/3/

 $(document).ready(function() { $('.navbar a.dropdown-toggle').on('click', function(e) { var elmnt = $(this).parent().parent(); if (!elmnt.hasClass('nav')) { var li = $(this).parent(); var heightParent = parseInt(elmnt.css('height').replace('px', '')) / 2; var widthParent = parseInt(elmnt.css('width').replace('px', '')) - 10; if (!li.hasClass('open')) li.addClass('open') else li.removeClass('open'); $(this).next().css('top', heightParent + 'px'); $(this).next().css('left', widthParent + 'px'); return false; } }); }); function setMouseHoverDropdown() { if ($(window).innerWidth() > 767) { $('ul.nav li').hover(function() { $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500); }, function() { $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500); }); } } $(window).load(function() { setMouseHoverDropdown(); }); $(document).ready(function() { setMouseHoverDropdown(); }); $(window).resize(function() { setMouseHoverDropdown(); });

 .fa-angle-down { float: right; margin-top: -50px; } a.dropdown-toggle { height: 10px; padding-bottom: 0px!important; line-height: 1!important; }

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <body> <div class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".category-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse category-navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="/"><span class="glyphicon glyphicon-home"></span></a> </li> <li> <a href="/computers"> Computers </a> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> &nbsp;<i class="fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li> <a href="/desktops"> Desktops </a> </li> <li> <a href="/notebooks"> Notebooks </a> </li> <li> <a href="/software"> Software </a> </li> </ul> </li> <li> <a href="/electronics"> Electronics </a> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> &nbsp;<i class="fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li> <a href="/camera-photo"> Camera &amp; photo </a> </li> <li> <a href="/cell-phones"> Cell phones </a> </li> <li> <a href="/others"> Others </a> </li> </ul> </li> <li> <a href="/apparel"> Apparel </a> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> &nbsp;<i class="fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li> <a href="/shoes"> Shoes </a> </li> <li> <a href="/clothing"> Clothing </a> </li> <li> <a href="/accessories"> Accessories </a> </li> </ul> </li> <li> <a href="/digital-downloads"> Digital downloads </a> </li> <li> <a href="/books"> Books </a> </li> <li> <a href="/jewelry"> Jewelry </a> </li> <li> <a href="/gift-cards"> Gift Cards </a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li> <form action="/search" method="get" onsubmit="return check_small_search_form()"> <div class="search_box pull-right"> <input type="text" id="small-searchterms" autocomplete="off" value="Search store" name="q" onfocus="if(this.value=='Search store')this.value=''" onblur="if(this.value=='') {this.value = 'Search store';}" /> </div> </form> </li> </ul> </div> </div> </div> </body>

Answer 2

您可以使li內的a標簽向左浮動，然后它應該可以工作。

.navbar-default .navbar-nav>li>a {
    float:left;
}

請更改CSS以使其與您的項目相關。

為了使單擊的箭頭向下起作用：

關閉當前可見的所有其他下拉菜單。
從所有其他li中刪除“ open”類。
從與我們的點擊相對應的當前li切換開放類。
切換與我們點擊對應的下拉菜單的可見性。
在懸停代碼中，我們還切換了li上的open類。 如果用戶將鼠標懸停在向下的箭頭上，則我們將class打開到相應的li。 反之亦然。

請參閱： https : //jsfiddle.net/qynfvow3/30/

引導導航欄切換不適用於移動設備

問題描述

2 個解決方案

解決方案1
3 已采納 2015-09-21 01:58:18

解決方案2
0 2015-09-21 01:14:25

引導導航欄切換不適用於移動設備

問題描述

2 個解決方案

解決方案1 3 已采納 2015-09-21 01:58:18

解決方案2 0 2015-09-21 01:14:25

解決方案1
3 已采納 2015-09-21 01:58:18

解決方案2
0 2015-09-21 01:14:25