Question

我正在尝试在移动视图中使用jQuery应用某些类。现在使用Bootstrap和Font Awesome，当在移动视图中时，向下箭头变为加号，可以点击以展开下拉菜单。现在，当您单击+ Font Awesome图标时，它将展开两个下拉列表。

我怎样才能使它适用于与+图标相关的下拉列表？

<ul class="nav navbar-nav navbar-right">
  <li class="dropdown">
    <a href="http://www.google.com" class="dropdown-toggle disabled" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Google</a> <span class="fa fa-caret-down hidden-xs" aria-hidden="true"></span><span class="fa visible-xs-inline pull-right fa-plus"></span> <span class="sr-only">Drop Down Indicator Icon</span>
    <ul class="dropdown-menu">
      <li><a href="http://smile.amazon.com">Amazon</a></li>
      <li><a href="#">Fake Link 1</a></li>
      <li><a href="#">Fake Link 2</a></li>
      <li><a href="#">Fake Link 2</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="http://smile.amazon.com" class="dropdown-toggle disabled" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Amazon</a> <span class="fa fa-caret-down hidden-xs" aria-hidden="true"></span><span class="fa fa-plus visible-xs-inline pull-right"></span> <span class="sr-only">Drop Down Indicator Icon</span>
    <ul class="dropdown-menu">
      <li><a href="http://www.google.com">Google</a></li>
      <li><a href="#">Fake Link 1</a></li>
      <li><a href="#">Fake Link 2</a></li>
      <li><a href="#">Fake Link 2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Menu Item</a>
  </li>
  <li>
    <a href="#">Menu Item</a>
  </li>
  <li>
    <a href="#">Menu Item</a>
  </li>
</ul>

这是我目前正在使用的页面上的jQuery。

//Hover for the navigation. 
$(function() {
  $(".dropdown").hover(
    function(){ 
      $(this).addClass('open'); 
      $(".dropdown.open .dropdown-toggle").attr("aria-expanded", "true");
    },
    function(){
      $(this).removeClass('open'); 
      $(".dropdown .dropdown-toggle").attr("aria-expanded", "false");
    }
  );
});

$('.dropdown-toggle').addClass("disabled");

//Add dropdown carrot to the dropdown items in menu. 
$("a.dropdown-toggle").after(" <span class='fa fa-caret-down hidden-xs' aria-hidden='true'></span><span class='fa fa-plus visible-xs-inline pull-right'></span> <span class='sr-only'>Drop Down Indicator Icon</span>");    
//Provides a way for the user to expand and collapse menu in mobile view. 
$(document).ready(function() {
  $("span.fa-plus").click(
    (function(e){
      if ($(".navbar-collapse.collapse.in .navbar-nav li.dropdown").hasClass('menu-open')) {
        $(".navbar-collapse.collapse.in .navbar-nav li.dropdown").removeClass('open');
        $(".navbar-collapse.collapse.in .navbar-nav li.dropdown").removeClass('menu-open');
        $(".dropdown.open .dropdown-toggle").attr("aria-expanded", "true");  
        console.log("Top If");
      }
      else {
        $(".navbar-collapse.collapse.in .navbar-nav li.dropdown").addClass('menu-open');
        $(".navbar-collapse.collapse.in .navbar-nav li.dropdown").removeClass('open');
        $(".dropdown.open .dropdown-toggle").attr("aria-expanded", "false");  
        console.log("Bottom If");
      }
      //alert("FA Plus");            
      $(this).toggleClass('fa-plus');
      $(this).toggleClass('fa-minus');
      return false;
    })
  );
});

Answer 1

我解决了我遇到的问题。

改变了这个：

$(document).ready(function() {
  $("span.fa-plus").click(
    (function(e){
      if ($(".navbar-collapse.collapse.in .navbar-nav li.dropdown").hasClass('menu-open')) {
        $(".navbar-collapse.collapse.in .navbar-nav li.dropdown").removeClass('open');
        $(".navbar-collapse.collapse.in .navbar-nav li.dropdown").removeClass('menu-open');
        $(".dropdown.open .dropdown-toggle").attr("aria-expanded", "true");  
        console.log("Top If");
      }
      else {
        $(".navbar-collapse.collapse.in .navbar-nav li.dropdown").addClass('menu-open');
        $(".navbar-collapse.collapse.in .navbar-nav li.dropdown").removeClass('open');
        $(".dropdown.open .dropdown-toggle").attr("aria-expanded", "false");  
        console.log("Bottom If");
      }
      //alert("FA Plus");            
      $(this).toggleClass('fa-plus');
      $(this).toggleClass('fa-minus');
      return false;
    })
  );
});

到此：

$(document).ready(function() {
    $("span.fa-plus").click(
        (function(){
            if ($(this).parent().hasClass('menu-open')) 
                {
                    $(this).parent().removeClass('open');
                    $(this).parent().removeClass('menu-open');
                    $(this).parent().find(".dropdown-toggle").attr("aria-expanded", "false");
                }
            else 
                {
                    //$(".navbar-collapse.collapse.in .navbar-nav li.dropdown").addClass('menu-open');
                    $(this).parent().addClass('menu-open');
                    $(this).parent().removeClass('open');
                    $(".dropdown.menu-open .dropdown-toggle").attr("aria-expanded", "true");
                }
            //alert("FA Plus");            
            $(this).toggleClass('fa-plus');
            $(this).toggleClass('fa-minus');
            return false;
        })
    );
});

定位父元素jQuery

1 个答案: