Question

我正在创建一种将内容发布到用户Feed的格式，有三个选项，文本，图片和链接。他们都有一个使用jquery弹出的div。当一个人打开时，我无法弄明白如何隐藏其他div，而另一个则被点击。 jsfiddle清楚地表明了这一点。

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

$('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);
});

FIDDLE

当其他人打开时，我怎么能隐藏一个jquery div

2 个答案: