Question

给出以下代码。考虑以下问题，为什么#d1中的内容无法从“命令”中获取样式，我也尝试使用.addClass函数来显示菜单。以下项目是下拉菜单。如果我添加("alert("hello");")，尽管它永远不会应用这些样式或类，但它将打印出该消息。为什么会这样？

    $('#d1').click(function () {
   $(this).attr('style', 'display: block!important');
});

.dropdown-list {
        display: none;
    }
    .active {
    color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
            <div class="logo">LOGO</div> 
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a id="d1" href="#">Projects</a>
                <ul class="dropdown-list" onclick="myFunction(this)">                    
                    <li><a style="line-height: 0;" href="#">Pictures</a></li>
                    <li><a style="line-height: 0;" href="#">Movies</a></li>
                    <li><a style="line-height: 0;" href="#">Slow-mo</a></li>
                </ul>
                </li>
                <li><a id="d2" href="#">About me</a>
                    <ul class="dropdown-list">                    
                        <li><a style="line-height: 0;" href="#">CV</a></li>
                        <li><a style="line-height: 0;" href="#">Phone</a></li>
                    </ul>
                    </li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

谢谢。

Answer 1

您必须定位要显示的next() ul。

//get a reference to all the links
var $dropdownLinks = $('.dropdown-link');

//bind the click handler to the links.
$dropdownLinks.on('click', function() {
  var $this = $(this);

  //remove the active class from the other links
  $dropdownLinks.not(this).removeClass('active');
  //toggle the active class on this element so it can open or close
  $this.toggleClass('active');
});

//make the link red if active
.dropdown-link.active {
  color: red;
}

//hide the immediately following sibling dropdown-list element
//of the dropdown-link, so long as it is not active
.dropdown-link:not(.active) + .dropdown-list {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div class="logo">LOGO</div>
  <ul>
    <li><a href="#" class="active dropdown-link">Home</a></li>
    <li><a id="d1" class="dropdown-link" href="#">Projects</a>
      <ul class="dropdown-list" onclick="myFunction(this)">
        <li><a style="line-height: 0;" href="#">Pictures</a></li>
        <li><a style="line-height: 0;" href="#">Movies</a></li>
        <li><a style="line-height: 0;" href="#">Slow-mo</a></li>
      </ul>
    </li>
    <li><a id="d2" class="dropdown-link" href="#">About me</a>
      <ul class="dropdown-list">
        <li><a style="line-height: 0;" href="#">CV</a></li>
        <li><a style="line-height: 0;" href="#">Phone</a></li>
      </ul>
    </li>
    <li><a href="#" class="dropdown-link">Contact</a></li>
  </ul>
</nav>

Answer 2

您可以尝试

$('ul li a').click(function (){
   $("ul li > a").removeClass("active");
   $(this).addClass("active");
   if($(this).next('.dropdown-list').length != 0){
        $(this).next('.dropdown-list').slideToggle();
   }
});

.dropdown-list {
        display: none;
 }
.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
   <div class="logo">LOGO</div> 
     <ul>
       <li><a href="#" class="active">Home</a></li>
       <li><a id="d1" href="#">Projects</a>
           <ul class="dropdown-list">                    
                  <li><a style="line-height: 0;" href="#">Pictures</a></li>
                    <li><a style="line-height: 0;" href="#">Movies</a></li>
                    <li><a style="line-height: 0;" href="#">Slow-mo</a></li>
           </ul>
       </li>
       <li><a id="d2" href="#">About me</a>
           <ul class="dropdown-list">                    
                        <li><a style="line-height: 0;" href="#">CV</a></li>
                        <li><a style="line-height: 0;" href="#">Phone</a></li>
           </ul>
       </li>
       <li><a href="#">Contact</a></li>
     </ul>
  </nav>

jQuery样式未应用于其元素

2 个答案: