Jquery隐藏所有带有appendTo内容的Div点击功能问题答案

【问题标题】：Jquery Hide all Div click function issue with appendTo contentJquery隐藏所有带有appendTo内容的Div点击功能问题
【发布时间】：2015-09-20 14:43:50
【问题描述】：

我有一个“Jquery 隐藏所有 Div 点击功能”，其中一个按钮可以隐藏/展开特定的 DIV 类。如果我将超链接放在 DIV 中，它就可以工作，直到我使用来自不同内容容器的 appendTo 函数自定义我的 DIV 内容。

问题：当我单击 span 按钮时，将显示显示的 DIV（带有超链接和文字）。但是，当我单击显示的 DIV 中的任何位置（即不是超链接）时，该 div 将关闭。超链接将起作用，并且不会关闭 DIV。

帮助：当我从任何部分单击或不是超链接时如何禁用以及不关闭显示的 DIV 时需要帮助。

这是我的问题的模型 - https://jsfiddle.net/g8e80hqb/

这是我的代码 -

<div class="Toggle_HideAll_Container">
    <div class="container">
<div class="menu_r1c1"></div><br>
<div class="menu_r2c1"></div><br>
</div>

<span>Button hide/expand 1</span>
</div>

<span class="content1">
<a href="http://google.com" target="_blank">Content1 Link 1</a> Dont include this text in the jquery click<br><br>
<a href="http://google.com" target="_blank">Content1 Link 2</a> Dont include this text in the jquery click<br><br>
</span>

<span class="content2">
<a href="http://google.com" target="_blank">Content2 Link 1</a> Dont include this text in the jquery click<br><br>
<a href="http://google.com" target="_blank">Content2 Link 2</a> Dont include this text in the jquery click<br><br>
</span>

这是 jquery -

$( ".content1" ).appendTo( ".menu_r1c1" );
$( ".content2" ).appendTo( ".menu_r2c1" );

// Start Toggle Hideall DIV
$('.Toggle_HideAll_Container div').hide();

$('.Toggle_HideAll_Container span').click(function(){
    var $this = $(this).parent().find('div');
    $(".Toggle_HideAll_Container div").not($this).hide();
    $this.toggle();
   });

感谢您对此提供的任何帮助，或者如果您需要更多信息。谢谢。

【问题讨论】：

标签： jquery toggle hide show-hide appendto

【解决方案1】：

尝试在选择器中使用:contains() 来指定应该切换元素的span 元素，因为其他span 元素包含在.Toggle_HideAll_Container 中

$('.Toggle_HideAll_Container span:contains(Button hide/expand 1)')
.click(function(){
    var $this = $(this).parent().find('div');
    $(".Toggle_HideAll_Container div").not($this).hide();
    $this.toggle();
});

jsfiddle https://jsfiddle.net/g8e80hqb/3/

【讨论】：

很抱歉再次询问 - guest271314 ...如何将 span:contains(Button hide/expand 1) 替换为 span 的 id 或类？...如果您不介意。即

【解决方案2】：

你可以试试这个：

$('.Toggle_HideAll_Container > span').click(function(){
    var $this = $(this).parent().find('div');
    $(".Toggle_HideAll_Container div").not($this).hide();
    $this.toggle();
});

这里是FIDDLE。

说明：

之前，您选择了所有 span 下 Toggle_HideAll_Container 但您只需要最后一个 span 和文字 Button hide/expand 1 所以，你可以或者给它一个ID 或者选择直接span child ofToggle_HideAll_Container`。

【讨论】：