Jquery 以切换状态为目标

我对所有这一切都是新手，但一旦我按下按钮，隐藏的div就会向下滑动，我会尝试将按钮的状态设定为目标。我希望当我将鼠标悬停在按钮上时，按钮会显示为原来的样子，但当我移动鼠标并单击新的滑动切换div时，按钮会返回到其原始状态。我在想一些关于

如果已锁定//则执行此操作

否则//保持原始状态

但是我找不到任何关于如何针对这种“活动或切换”状态的示例

这是到目前为止我的代码。 HTML-我有6个这样的按钮，按3×2排列，滑动切换div在顶部3和底部3的中心弹出，所有操作都很好

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

---

无需通过ID呼叫每个人

HTML

---

你可以看到它在运行

啊，是的，我确实需要在任何地方做一些简化，哈哈，以前从来没有编码过，所以通过自学慢慢达到目的。如果你查看我上面发布的JSFIDLE链接，你会看到我基本上在尝试做什么，我还没有在那里尝试过你的代码，当div下降时，它会激活悬停状态吗？现在刚刚尝试了这个，我的div不再下降，点击这个代码@FiLeVeR10Ok谢谢@FiLeVeR10我只是继续如果它起作用的话，我会继续的哈哈。所以我知道它并不完美，但我的index.html文件在我的浏览器中工作得非常好，哈哈，太酷了，非常感谢@欢迎光临！下拉部分在JSFIDLE上不起作用，但您可以看到它在哪里，当我单击每个产品框时，间隙会打开和关闭，我希望颜色的悬停状态在切换后显示在相关按钮上，如果这有意义@filoxo@FiLeVeR10这就是我的解决方案。

$(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;
                });
                });
                });
                });
                });
                });

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

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

$('.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
    });
});

$(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); 
            }   
        });
    });
});