Question

我正在寻找的是创建一个多个切换按钮，如果单击一个按钮，则应关闭另一个按钮，目前我有两个切换按钮，所以我写了切换代码，但它很长，如果我增加切换按钮的数量它会继续增加有什么简短的方法吗？

我的代码在这里：

   $("#cat_toggle").click(function(e){
          e.preventDefault();
if($('.row42').is(":visible") ) {
     $(".row42").hide();
       $(".row41").slideToggle(500);

    } else {
               $(".row41").slideToggle(500);
        }
});


$("#a_z").click(function(e){
          e.preventDefault();
if($('.row41').is(":visible") ) {
     $(".row41").hide();
       $(".row42").slideToggle(500);

    } else {
               $(".row42").slideToggle(500);
        }
});

还有JSfiddle链接http://jsfiddle.net/kundansingh/9pdks27c/2/

注意：我不是在寻找任何插件

Answer 1

您可以为按钮使用课程，并将ID设为内容：

<div id="row41" class="button">Sample 1</div>
<div id="row42" class="button">Sample 2</div>
<div id="row43" class="button">Sample 3</div>

<div class="row41">sample demo txt one 1</div>
<div class="row42">sample demo txt two 2</div>
<div class="row43">sample demo txt three 3</div>

为该课程添加 click event ：

$(".button").click(function (e) {

       e.preventDefault();

       $('[class^=row]').not($('.'+this.id)).hide();          

       $('.'+this.id).slideToggle(500);
});

这里是DEMO

Answer 2

更改了HTML结构，以获取标识符：

<div class="cat_toggle" data-target="row1">Sample 1</div>
<div class="cat_toggle" data-target="row2"> Sample 2 </div>
<div class="cat_toggle" data-target="row3">Sample 3</div>
<div class="cat_toggle" data-target="row4"> Sample 4 </div>    

<div class="row" id="row1" >
sample demo txt one 1
</div>
<div class="row" id="row2">
sample demo txt two 2
</div>
<div class="row" id="row3" >
sample demo txt one 3333
</div>
<div class="row" id="row4">
sample demo txt two 4444444444444
</div>

我正在使用自定义数据属性 - 非常好的功能。

JQuery的：

$(".cat_toggle").click(function(e){
              e.preventDefault();
           id=$(this).data('target');
           //console.log(id);


         if($('.row' +'#'+id).is(":visible") ) {

     $(".row"+'#'+id).slideUp(500);

    } 
           else {
                $(".row"+'#'+id).slideToggle(500);
 $(".row"+'#'+id).siblings('.row').slideUp(500);
           }


        });

演示：http://jsfiddle.net/9pdks27c/4/

P.S。 CSS也简化了，只需要类......

Answer 3

这是一种方法，对当前的html，css和js进行了大量更改。

新安排的html：

<button class="toggle-category" data-toggle-id="s1">Sample 1</button>
<button class="toggle-category" data-toggle-id="s2">Sample 2</button>
<div class="categories toggle-group">
    <div class="category hidden" id="s1">sample demo txt one 1</div>
    <div class="category hidden" id="s2">sample demo two 2</div>
</div>

一些Javascript：

$(function () {
    $("body").on("click",".toggle-category", function (event) {
        var $trigger = $(this);
        var $target = $('#'+$trigger.data("toggle-id"));
        var $group = $target.closest(".toggle-group");
        if($target.length){
            // Hide all
            $(".category:visible", $group).not($target).slideToggle("slow");
            // Show selected
            if(!$target.is(":visible"))
            {
                $target.slideToggle("slow");
            }
        } 
    })
});

示例css：

button {
    background-color:#F85F5F;
    display: inline-block;
}
.category {
    margin: 15px 0;
}
.hidden {
    display: none;
}

JsFiddle演示：http://jsfiddle.net/9pdks27c/7/

Answer 4

您必须使用相同的名称id和class来帮助您定位元素。

$("#wrap div[id^='cat']").click(function() {
  var active = $(this).attr('id');
  $(this).siblings("[class^='cat']:not(." + active + ")").hide(500);
  $(this).siblings("." + active).slideToggle(500);
});

#cat1,
#cat2,
#cat3 {
  margin-top: 24px;
  margin-left: 2%;
  background-color: #F85F5F;
  padding: 0 15px;
  line-height: 36px;
  float: left;
  color: #FFF;
  font-weight: 600;
  cursor: pointer;
}
.cat1,
.cat2,
.cat3 {
  display: none;
  clear: both;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrap">
  <div id="cat1">Sample 1</div>
  <div id="cat2">Sample 2</div>
  <div id="cat3">Sample 3</div>
  <div class="cat1">sample demo txt one 1</div>
  <div class="cat2">sample demo txt two 2</div>
  <div class="cat3">sample demo txt two 3</div>
</div>

如何创建多个切换按钮

4 个答案: