jQuery樣式未應用於其元素

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>