打开并关闭或返回(如果已打开导航

Question

我有一个导航，点击一下我就会展开它，但如果它已经展开了，我们再次点击它，它不应该做任何事情(返回)。我有这个代码，但它不能正常工作，目前，如果我点击项目，它会展开它，但如果我再次点击，它会关闭导航，如果我再次点击，它会展开它，但它的行为很滑稽。我基本上只需要能够点击并打开，如果已经打开，什么也不做，因为我将有一个关闭按钮。附注："item“是我之前在代码中定义的一个变量。

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");
        });
});