Question

我有几个侧面板，然后是一个按钮，只有在有人打开了几个侧面板后才能使用。您可以在小提琴中看到我有一个Click Me按钮，默认情况下当前可用。但我希望只有当有人打开侧面板多次时才能使用它。此外，按钮应该来自上面，就像侧面板上的关闭按钮一样。

有人可以帮忙谢谢你。

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

Answer 2

只需创建一个计算侧边栏数量的变量，例如

var openCounter = 0;

每次打开侧边栏时都会使用openCounter++，每次关闭侧边栏时都会openCounter--。打开后，检查他们是否打开了带有

的侧边栏

if (openCounter >= 3) {
  $('#yourButton').show();
}

请参阅https://jsfiddle.net/h9yfbden/6/以获取示例

Answer 3

使用var作为计数器，每次按下按钮时递增它，然后使用简单的if语句检查是否应启用disabled元素。

有些事情：

<div>
  <button id="button1">Button 1</button>
  <button id="button2">Button 2</button>
  <button id="button3" disabled>Button 3</button>
</div>

<script>
var click_count=0;
$(button).click(function({
click_count++;
if(click_count>2){
  $("#button3").attr("disabled",false);
}}));
</script>

这是一个小提琴Charles Duffy

按钮应仅在两个事件之后可用

3 个答案: