Question

我正在使用a solution found on SO进行基于Jquery的slideToggle

在上面的代码中，我试图添加2个新行为

1）更改切换按钮的css类（toggle_on，toggle_off） 2）在滑动容器内单击以折叠手风琴 3）点击外面（页面上的任何其他位置）折叠手风琴 4）清理JS代码的其他任何提示？

HTML

<br><br><br><button href="#" id="bronze" class="tab bronzelink">Bronze</button>
<button href="#" id="silver" class="tab silverlink">Silver</button>
<button href="#" id="gold" class="tab goldlink">Gold</button>
<br><br>
<div class="popup bronze">Bronze?</div>
<div class="popup silver">Silver?</div>
<div class="popup gold">Gold?</div>

JS（使用jquery）

$(document).ready(function(){
    $(".tab").click(function(){ 
        var medal = $(this).attr("id");
        if($("." + medal + ":visible").length){;
          $("." + medal).slideUp("fast");

        } else {
          $(".popup").slideUp("fast");
          $("." + medal).slideDown("fast");  
        }
    });
});

CSS

div {
    width: 100px;
    border: 1px solid #333;
    display: none;
}
div.bronze {
    background-color: #aa5555;
    height: 100px;    
}
div.silver {
    background-color: #ccccdd;
    height: 200px;    
}
div.gold {
    background-color: #ddcc00;
    height: 50px;    
}

.toggle_on{
    background:red;
}

.toggle_off{
    background:blue;
}

Answer 1

对于第一和第四，我会说：

$(document).ready(function(){
    $(".tab").click(function () {
    $(this).addClass("toggle_on").removeClass("toggle_off").siblings("a.tab").removeClass("toggle_on").addClass("toggle_off");
    var medal = $(this).attr("id");
    if($("." + medal + ":visible").length){
      $("." + medal).slideUp("fast");
      return;
    }
    $(".popup").not("." + medal).slideUp(function () {
        $("." + medal).slideDown();
    });
    });
});

默认情况下，为选项卡添加适当的类，即toggle_on，toggle_off。

第二和第三：

$(document).mouseup(function (e) {
    var container = $(".tab");

    if (!container.is(e.target) // if the target of the click isn't the container...
    &&
    container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $(".tab").removeClass("toggle_on").addClass("toggle_off");
        $(".popup").slideUp("fast");
    }
});

工作fiddle

在SlideToggle上 - 添加CSS类+折叠行为

1 个答案: