Question

我想要做的是在点击按钮时切换元素。我有更多按钮触发切换事件。有点棘手的是，如果已经显示div，则切换为不可见而不是再次显示。这一点是要显示的元素保存由ajax生成的信息。

我已经做到了这一点，但只有点击第一个按钮才能完成事件链。

这是HTML：

<div class="row">
    <button id="classOption1" class="btn btn-primary toggleOptions">firstButton</button>
    <button id="classOption2" class="btn btn-primary toggleOptions">secondBotton</button>
    <button id="classOption3" class="btn btn-primary toggleOptions">thirdButton</button>
    <button id="classOption4" class="btn btn-primary toggleOptions">yet another button</button>
</div>

<div class="classOptions">
    //some irrelevant HTML here
</div>

$(".toggleOptions").click(function(){
    var trigger = $(".toggleOptions").attr('id');
    if (trigger != $(this).attr('id')) {
        $(".classOptions").toggle(1000).promise().done(function() {
            trigger = $(this).attr('id');
        });
        $(".classOptions").toggle(1000);
    } else {
        $(".classOptions").toggle(1000).promise().done(function() {
            trigger = $(this).attr('id');
        });
    }
});

如果我先点击firstButton，然后点击secondButton，就可以了。但是，如果我再次点击secondButton隐藏元素，只需隐藏并再次显示。但是，如果我再次点击firstButton，它会按预期隐藏元素。

JsFiddle复制代码。

我希望自己能够理解，而不是我的第一语言。

Answer 1

据我了解：

...我想要做的是在点击a时切换一个元素   按钮......

...如果div已经显示，会有点棘手，   切换到不可见而不是再次显示...

在这种情况下，您可以更改选择器以了解元素是否可见：

var isVisible = $(".classOptions:visible").length > 0;

如果你想在已经隐藏的时候使div“闪烁”，只需测试一下：

$(".toggleOptions").click(function(){
    var isVisible = $(".classOptions:visible").length > 0;

    $(".classOptions").toggle(1000);

    if(!isVisible){
        $(".classOptions").toggle(1000);
    }    
});

很抱歉，如果我不清楚你。

JSFiddle reproduction

Answer 2

从解决方案中删除此代码$(".classOptions").toggle(1000);。

$(".toggleOptions").click(function(){
   var trigger = $(".toggleOptions").attr('id');
   if (trigger != $(this).attr('id')) {
       $(".classOptions").toggle(1000).promise().done(function() {
          trigger = $(this).attr('id');
       });
   } else {
       $(".classOptions").toggle(1000).promise().done(function() {
           trigger = $(this).attr('id');
       });
   }
});

Answer 3

刚刚找到了正确的方法，这是代码：

    $( document ).ready(function() {

            var selector;
            var lastSelector = null;

            $(".toggleOptions").click(function(){

                selector = $(this).attr('id');

                if(lastSelector != selector && lastSelector != null){ //different button clicked or page just loaded
                    if($(".classOptions").is(":visible")){ // element is shown, so we hide and show again
                        $(".classOptions").toggle(1000); // toggle to invisible
                        $(".classOptions").toggle(1000).promise().done(function() {
                            lastSelector = selector;
                        });
                    } else { // element is hidden, just show it
                        $(".classOptions").toggle(1000).promise().done(function() {
                            lastSelector = selector;
                        });
                    }
                }

                if(lastSelector == selector || lastSelector == null){ // same button pressed twice, toggle as intended
                    $(".classOptions").toggle(1000).promise().done(function() {
                        lastSelector = selector;
                    });

                }


                $("#lastSelector").text("Last Selector: " + lastSelector);
                $("#thisSelector").text("Just Clicked: " + selector);

            });
        });

http://jsfiddle.net/3qjeqqkk/32/ 谢谢大家帮忙！惭愧我不能投票。

jQuery从不同的按钮切换

3 个答案: