Question

我是所有这一切的新手，但是一旦我按下它并且我隐藏的div slideToggles，我试图瞄准我按钮的状态。我希望按钮显示为当我将鼠标悬停在它上面但当我移动鼠标并单击进入新的slideToggled div时，它会恢复到原始状态。

我正在思考一些事情

ifToggled //然后执行此操作

否则//保持原始状态，

但是我找不到任何关于如何定位这个“活跃或切换”的例子。状态。

到目前为止，这是我的代码。 HTML - 我有6个这样的按钮按3×2排列，并且滑动按钮div在顶部3和底部3的中心弹出，一切正常。

<a href="#!" class="active">
      <span id="product1">
      </span>
</a>

JQuery的。除了注释掉的位之外，一切正常。

$(document).ready(function(){
                $("#product1").click(function(event){
                    $("#product2box").slideUp('slow', function() {
                    $("#product3box").slideUp('slow', function() {
                    $("#product4box").slideUp('slow', function() {
                    $("#product5box").slideUp('slow', function() {
                    $("#product6box").slideUp('slow', function() {
                        event.preventDefault();
                    $("#product1box").stop().slideToggle(1000);

                    // if ($("product1box").isToggled) {
                    //  //want to show hover state as active class
                    // } else {
                    //  ///want to show normal state
                    // }

                    return false;
                });
                });
                });
                });
                });
                });

Answer 1

$(document).ready(function() {
    $(".producthandler").click(function() {
        var ctx = $(this);
        var productboxId = ctx.children().eq(0).attr("id");

        ctx.toggleClass('active');
        $("#" + productboxId + "box").stop().slideToggle(1000);

        $(".producthandler").each(function() {
            var ctx = $(this);
            var producthandlerId = ctx.children().eq(0).attr('id');

            if (productboxId !== producthandlerId) {
                ctx.removeClass('active');
                $("#" + producthandlerId + "box").slideUp(1000); 
            }   
        });
    });
});

Answer 2

无需按ID

调用每个人

HTML

<a href="#" class="product">
    <span>...</span>
</a>
...

<div class="productbox">...</div>
....

的jQuery

$('.product').each(function(i) {
    $(this).on('click', function() {
        $(this).toggleClass('active').siblings('.active').removeClass('active');//toggle active class
        $('.productbox').eq(i).stop().slideToggle()//current up/down
            .siblings('.productbox:visible').stop().slideUp();//siblings up

        return false;//prevent link
    });
});

您可以在行动Right Here »

中看到它

针对切换状态

2 个答案: