jquery - 当其他人打开时如何隐藏jquery div

Question

我正在创建一种将内容发布到用户提要的格式，并且有三个选项，文本、图像和链接。他们都有一个使用jquery弹出的div。我无法弄清楚如何在打开一个 div 并单击另一个 div 时隐藏其他 div。jsfiddle清楚地显示了它。

提前感谢您推荐的任何内容。

http://jsfiddle.net/NFTFw/252/

$('input[name=text]').click(function () {
   $('#textpost').slideToggle($(this).is(':checked'));
    });
$('input[name=link]').click(function () {
   $('#linkpost').slideToggle($(this).is(':checked'));
    });
$('input[name=image]').click(function () {
   $('#imagepost').slideToggle($(this).is(':checked'));
    });

Answer 1

使用您的代码，您可以编写一个函数来更新所有三个 div 以显示正确的一个。

例如 ：

  function toggle(idList) {
  for(i=0;i<idList.length;i++){
  $(idList[i]).slideToggle($(this).is(':checked'));
}
 }

和

     var ids = [ 'name-link', 'name-image', 'name-text' ]; 
    $('input[name=text]').click(function () {
 toggle(ids);
});
  $('input[name=link]').click(function () {
 toggle(ids);
});
    $('input[name=image]').click(function () {
     toggle(ids);
});

如果您已经有逻辑使复选框的行为类似于单选按钮，这将起作用。

Answer 2

向复选框添加“收音机”功能，并使其更具动态性，使用输入名称来选择要滑动的元素。

$('input[type="checkbox"]').on('change', function () {
    $('#' + this.name + 'post').slideToggle(this.checked)
                               .siblings('div')
                               .slideUp();
    $(this).siblings('input').prop('checked', false);
});

小提琴