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

Question

我有一个 "Jquery Hide all Div click function"，其中一个按钮可以 hide/expand 一个特定的 DIV class。如果我将我的超链接和工作放在 DIV 中，它就会工作，直到我使用来自不同内容容器的 appendTo 函数自定义我的 DIV 内容。

问题：当我点击跨度按钮时，会显示显示的 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();
   });

感谢任何帮助，或者如果您需要更多信息。谢谢。

Answer 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/

Answer 2

你可以试试这个：

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

这里是 FIDDLE.

解释：

Previously, you were selecting all span under Toggle_HideAll_Container but you only need the last span with text Button hide/expand 1 so, you can either give it an ID or select direct span child ofToggle_HideAll_Container`.

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

Jquery Hide all Div click function issue with appendTo content

jquery

toggle

hide

show-hide

appendto