Question

我有一个导航，点击即可展开它，但如果它已经展开，我们再次点击该项目，它不应该做任何事情（返回）。我有这个代码，但它不能正常工作，目前如果我点击它扩展它的项目，但如果我再次点击它关闭导航，如果我再次点击它扩展它但它表现得很有趣。我基本上只需要能够点击并打开，如果已经打开则什么都不做，因为我还是会有一个关闭按钮。附： “item”是以前在代码中定义的var。

var item = $(".nav a");
<div class="nav">
    <a href="#">Trigger</a>
    <div class="wrapSubContent">
         <div class="wrapNavtoShowHide">
            ..content..
         </div>
     </div>
</div>

item.click(function(e) {
    e.preventDefault();
    $(".wrapSubContent").slideToggle("slow", "linear", function(){
        $(".wrapNavtoShowHide").slideToggle("slow", "linear");
    });
});

任何？

Answer 1

您应该检查div是否隐藏，然后使用slideDown。

var item = $(".nav a");
$(".wrapNavtoShowHide").hide();
item.click(function(e) {
    e.preventDefault();
    if ($(".wrapNavtoShowHide").is(":hidden")) {
        $(".wrapNavtoShowHide").slideDown("slow", "linear");
    }
});

看看这个实际的jsfiddle example。

Answer 2

检查div是否已经打开，如下所示

item.click(function(e) {
    e.preventDefault();
    if ( $(".wrapSubContent").is(":visible") ) {
     return
    }
        $(".wrapSubContent").slideToggle("slow", "linear", function(){
            $(".wrapNavtoShowHide").slideToggle("slow", "linear");
        });
});

或者：

item.click(function(e) {
    e.preventDefault();
    if ( $(".wrapSubContent:visible").length > 0) {
     return
    }
        $(".wrapSubContent").slideToggle("slow", "linear", function(){
            $(".wrapNavtoShowHide").slideToggle("slow", "linear");
        });
});

如果已打开导航，则打开和关闭或返回

2 个答案: