Question

我目前正在开发一个用于打开和关闭多个部分的javascript插件。我有一切正常，但脚本neets以某种方式组合，所以这可以缩放到超过3切换。

例如，如果我有20个不同的选项，我不想重写此脚本20次。

<div class="toggle1">Toggle 1</div>
<div class="toggle-close1">Close Toggle 1</div>

<div class="toggle2">Toggle 2</div>
<div class="toggle-close2">Close Toggle 2</div>

<div class="toggle3">Toggle 3</div>
<div class="toggle-close3">Close Toggle 3</div>


<div class="toggle-box1">Toggle 1 Box Information</div>
<div class="toggle-box2">Toggle 2 Box Information</div>
<div class="toggle-box3">Toggle 3 Box Information</div>

http://jsfiddle.net/duBbE/

Answer 1

如果您可以重新安排代码以在包装器中包含可切换元素，例如：

<div class='toggle-wrapper'>
  <a class='toggle-button'>Toggle</a>
  <div class='toggleable'>
    content
  </div>
</div>

你可以这样做：

$(".toggle-button").click(function (ev) {
  ev.preventDefault();
  $(this).closest(".toggle-wrapper").find("> .toggleable").toggle();
});

为你准备一个小提琴的自由：http://jsfiddle.net/duBbE/1/

这是一个粗略的想法，但应该可以帮助你开始

Answer 2

我明白你要做什么。如果您愿意接受建议，可以通过简单的方式完成。

HTML

<ul id="first">
  <li>Toggle 1</li>
  <li>Toggle 2</li>
  <li>Toggle 3</li>
  <li>Toggle 4</li>
</ul>

<ul id="second">
  <li>This is 1</li>
  <li>This is 2</li>
  <li>This is 3</li>
  <li>This is 4</li>
</ul>

CSS

ul{
  list-style-type: none;
}

#second li{
  display: none;
}

的jQuery

$(function(){
   $("#first li").click(function(){
      var index = $(this).index();
      $("#second li:eq(" + index + ")").toggle();
   });
});

FIDDLE

Answer 3

如果不更改HTML（只需删除classename中的数字），您最终可能会遇到这样的解决方案：

$(".toggle").each(function(index) {
    $(this).click(function(){
        $(".toggle-close").hide();
        $(".toggle").show();
        $(this).hide(0);
        $(".toggle-close").eq(index).show(0);
        $(".toggle-box").slideUp(800);
        $(".toggle-box").eq(index).slideToggle(800);
    });
});
$(".toggle-close").each(function(index) {
    $(this).click(function(){
        $(this).hide(0);
        $(".toggle").eq(index).show(0);
        $(".toggle-box").eq(index).slideToggle(800);
    });
});

<强> The Fiddle

Answer 4

呃..不清楚你真正想做什么。制作一个实用功能（插件？）来处理各种隐藏/显示方法？试试这个（http://jsfiddle.net/duBbE/9/）：

function toggleMe(options) {
  var _selector = !!options.sSelector ? options.sSelector : '.toggle'; // Pass any selector (can be #idSomething or .classSomething)
  var _method = !!options.sMethod ? options.sMethod : 'toggle'; // Pass in method let default be used ('toggle' will set it to other value of current state(show/hide))
  var _time = !!options.nTime ? options.nTime: 800; // Pass class in time to be used with certain methods
  //console.log(options);

  $(_selector).each(function(event){
    //console.log(this);
    try {
        if(_method == 'slideUp') {
            $(this).slideUp(_time);
        } else if(_method == 'slideToggle') {
            $(this).slideToggle(_time);
        } else if(_method == 'toggle') {
            this.style.display = this.style.display == 'none' ? 'block': 'none';
        } else if(_method == 'hide') {
            $(this).hide();
        }  else if(_method == 'show') {
            $(this).show();
        } else {
            console.log('here in NADA Land');
        }
    } catch(err) {
        console.log(err);
    } 
  });
}; // End Function

然后更一般地初始化，绑定或调用它。我认为这应该让你开始。

$(function() {

  toggleMe({sSelector: '.toggle3', sMethod: 'toggle'});
  toggleMe({sSelector: '.toggle-box3', sMethod: 'slideToggle'});
  toggleMe({sSelector: '.toggle-box2', sMethod: 'slideUp'});
  toggleMe({sSelector: '.toggle1', sMethod: 'hide'});
  $('.toggle-close1').on('click', function(event) {
      toggleMe({sSelector: '.toggle1', sMethod: 'toggle'});
      console.log(event.target.innerHTML.indexOf('Close'))
      event.target.innerHTML = $('.toggle1')[0].style.display == 'block'  ? 'Close Toggle 1': 'Open Toggle 1';
  });
});

您可以将/ if out替换为case-switch，展开，添加默认大小写等。

组合多个切换脚本

4 个答案: