如何创建多个切换按钮

How to Create multiple Toggle button

本文关键字：按钮 何创建 创建      更新时间：2023-09-26

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

我的代码位于此处：

   $("#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/

注意：我不想找任何插件

您可以为按钮使用一个类，并使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

更改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/

附言CSS也被简化了，只需要类。。。

这里有一种方法，对当前的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/

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

$("#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>

相关文章：