我在使用 jquery SlideToggle 时遇到问题,这是我的代码:
$(".dropdownmainmenu").click(function(){
$(this).children(".showmenu").slideToggle();
$(this).toggleClass("activemainmenu");
$(this).find(".showarrowmainmenu").toggleClass("arrowright");
$(this).find(".showarrowmainmenu").toggleClass("arrowdown");
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="dropdownmainmenu">
<div class="hedmainmenu">
<a href="#">
<i class="fa fa-newspaper-o"></i>
News
<span class="showarrowmainmenu arrowright"></span>
</a>
</div>
<ul class="showmenu">
<li><a href="add_news.php">Add news</a></li>
<li><a href="news.php">All News</a></li>
</ul>
</div>
我的问题是,当我向下滑动菜单并尝试打开“添加新闻”之类的链接时,它不起作用,菜单会向上滑动。
如何解决这个问题?
最佳答案
如果理解正确,您只想将 EventListener 添加到类 .hedmainmenu
的 div
元素:
//change the selector to add eventListener to the the div with class hedmainmenu
$(".dropdownmainmenu > div.hedmainmenu").click(function() {
//now .showmenu is sibling of div.hedmainmenu so I used .next()
$(this).next(".showmenu").slideToggle();
$(this).toggleClass("activemainmenu");
$(this).find(".showarrowmainmenu").toggleClass("arrowright");
$(this).find(".showarrowmainmenu").toggleClass("arrowdown");
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdownmainmenu">
<div class="hedmainmenu">
<a href="#">
<i class="fa fa-newspaper-o"></i> News <span class="showarrowmainmenu arrowright"></span>
</a>
</div>
<ul class="showmenu">
<li><a href="add_news.php">Add news</a>
</li>
<li><a href="news.php">All News</a>
</li>
</ul>
</div>
关于javascript - jquery SlideToggle 使用此选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35727087/