javascript - 按钮应该仅在两个事件后可用

Question

我有几个侧面板，然后是一个按钮，该按钮只有在有人打开多个侧面板后才可用。 您可以在 fiddle 中看到我有一个“点击我”按钮，该按钮当前默认可用。但我希望它仅在有人多次打开侧面板时才可用。 此外，该按钮应来自上方，例如侧面板上的关闭按钮。

谁能帮忙谢谢

JSFiddle

HTML:

<i class="glyphicon glyphicon-plus-sign cd-btn-a abc"></i>
<div class="container">
  <i class="glyphicon glyphicon-plus-sign cd-btn"></i>
</div>

<div class="place">
<i class="glyphicon glyphicon-plus-sign cd-btn-b abc"></i>
</div>
<div class="cd-panel from-right"> 
            <header class="cd-panel-header">
                <a href="#0" class="cd-panel-close"></a>
            </header>
            <div class="cd-panel-container">
        Content
  </div>
</div>
<div class="cd-panel-a from-right"> 
            <header class="cd-panel-header">
                <a href="#0" class="cd-panel-close"></a>
            </header>
            <div class="cd-panel-container color">
        Content
  </div>
</div>
<div class="cd-panel-b from-right"> 
            <header class="cd-panel-header">
                <a href="#0" class="cd-panel-close"></a>
            </header>
            <div class="cd-panel-container color-b">
        Content
  </div>
</div>
<div>
<button>
click me
</button>
</button>
</div>
</div>

JQuery:

$(".glyphicon-minus-sign, .glyphicon-plus-sign").click(function(){
    $(this).toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
});


jQuery(function($){
    //open the lateral panel
    $('.cd-btn').on('click', function(event){
        event.preventDefault();
        $('.cd-panel').toggleClass('is-visible');
    // CHECKING ICON OF .cd-btn-a
    if($('.cd-btn-a').hasClass('glyphicon-minus-sign')) {
       $('.cd-btn-a').toggleClass('glyphicon-minus-sign glyphicon-plus-sign');
       $('.cd-panel-a').removeClass('is-visible');
     }
    });
    //close the lateral panel
    $('.cd-panel').on('click', function(event){
        if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) { 
            $('.cd-panel').removeClass('is-visible');
            $('.cd-btn').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
            event.preventDefault();
        }
    });
});

jQuery(function($){
    //open the lateral panel
    $('.cd-btn-a').on('click', function(event){
        event.preventDefault();
        $('.cd-panel-a').toggleClass('is-visible');
    // CHECKING ICON OF .cd-btn
    if($('.cd-btn').hasClass('glyphicon-minus-sign')) {
       $('.cd-btn').toggleClass('glyphicon-minus-sign glyphicon-plus-sign');
       $('.cd-panel').removeClass('is-visible');
     }
    });
    //close the lateral panel
    $('.cd-panel-a').on('click', function(event){
        if( $(event.target).is('.cd-panel-a') || $(event.target).is('.cd-panel-close') ) { 
            $('.cd-panel-a').removeClass('is-visible');
            $('.cd-btn-a').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
            event.preventDefault();
        }
    });
});

jQuery(function($){
    //open the lateral panel
    $('.cd-btn-b').on('click', function(event){
        event.preventDefault();
        $('.cd-panel-b').toggleClass('is-visible');
    // CHECKING ICON OF .cd-btn
    if($('.cd-btn, .cd-btn-a').hasClass('glyphicon-minus-sign')) {
       $('.cd-btn, .cd-btn-a').toggleClass('glyphicon-minus-sign glyphicon-plus-sign');
       $('.cd-panel').removeClass('is-visible');
     }
    });
    //close the lateral panel
    $('.cd-panel-b').on('click', function(event){
        if( $(event.target).is('.cd-panel-a') || $(event.target).is('.cd-panel-close') ) { 
            $('.cd-panel-b').removeClass('is-visible');
            $('.cd-btn-b').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
            event.preventDefault();
        }
    });
});

Answer 1

试试这段代码

    <i class="glyphicon glyphicon-plus-sign cd-btn-a abc"></i>
    <div class="container">
      <i class="glyphicon glyphicon-plus-sign cd-btn"></i>
    </div>

    <div class="place">
    <i class="glyphicon glyphicon-plus-sign cd-btn-b abc"></i>
    </div>
    <div class="cd-panel from-right"> 
                <header class="cd-panel-header">
                    <a href="#0" class="cd-panel-close"></a>
                </header>
                <div class="cd-panel-container">
            Content
      </div>
    </div>
    <div class="cd-panel-a from-right"> 
                <header class="cd-panel-header">
                    <a href="#0" class="cd-panel-close"></a>
                </header>
                <div class="cd-panel-container color">
            Content
      </div>
    </div>
    <div class="cd-panel-b from-right"> 
                <header class="cd-panel-header">
                    <a href="#0" class="cd-panel-close"></a>
                </header>
                <div class="cd-panel-container color-b">
            Content
      </div>
    </div>
    <div>
    <button id='clickbtn' style="display:none;">
    click me
    </button>
    </button>
    </div>
    </div>

脚本

        var Counter =0; 
        $(".glyphicon-minus-sign, .glyphicon-plus-sign").click(function(){
            $(this).toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
            Counter++;
        });


        jQuery(function($){
            //open the lateral panel
            $('.cd-btn').on('click', function(event){
          if(Counter>3){
            $("#clickbtn").show();
          }
                event.preventDefault();
                $('.cd-panel').toggleClass('is-visible');
            // CHECKING ICON OF .cd-btn-a
            if($('.cd-btn-a').hasClass('glyphicon-minus-sign')) {
               $('.cd-btn-a').toggleClass('glyphicon-minus-sign glyphicon-plus-sign');
               $('.cd-panel-a').removeClass('is-visible');
             }
            });
            //close the lateral panel
            $('.cd-panel').on('click', function(event){
                if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) { 
                    $('.cd-panel').removeClass('is-visible');
                    $('.cd-btn').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
                    event.preventDefault();
                }
            });
        });

        jQuery(function($){
            //open the lateral panel
            $('.cd-btn-a').on('click', function(event){
                event.preventDefault();
                $('.cd-panel-a').toggleClass('is-visible');
            // CHECKING ICON OF .cd-btn
            if($('.cd-btn').hasClass('glyphicon-minus-sign')) {
               $('.cd-btn').toggleClass('glyphicon-minus-sign glyphicon-plus-sign');
               $('.cd-panel').removeClass('is-visible');
             }
            });
            //close the lateral panel
            $('.cd-panel-a').on('click', function(event){
                if( $(event.target).is('.cd-panel-a') || $(event.target).is('.cd-panel-close') ) { 
                    $('.cd-panel-a').removeClass('is-visible');
                    $('.cd-btn-a').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
                    event.preventDefault();
                }
            });
        });

        jQuery(function($){
            //open the lateral panel
            $('.cd-btn-b').on('click', function(event){
                event.preventDefault();
                $('.cd-panel-b').toggleClass('is-visible');
            // CHECKING ICON OF .cd-btn
            if($('.cd-btn, .cd-btn-a').hasClass('glyphicon-minus-sign')) {
               $('.cd-btn, .cd-btn-a').toggleClass('glyphicon-minus-sign glyphicon-plus-sign');
               $('.cd-panel').removeClass('is-visible');
             }
            });
            //close the lateral panel
            $('.cd-panel-b').on('click', function(event){
                if( $(event.target).is('.cd-panel-a') || $(event.target).is('.cd-panel-close') ) { 
                    $('.cd-panel-b').removeClass('is-visible');
                    $('.cd-btn-b').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
                    event.preventDefault();
                }
            });
        });

fiddle link