Jquery Скрыть все проблемы с функцией щелчка Div с содержимым appendTo

У меня есть функция "Jquery Hide all Div click", где кнопка может скрывать/расширять определенный класс DIV. Это работает, если я поместил свою гиперссылку и работал внутри DIV, пока я не настроил свой контент DIV с помощью функции appendTo из другого контейнера контента.

Проблема: когда я нажимаю кнопку 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();
   });

Благодарим за любую помощь в этом или если вам нужна дополнительная информация. Спасибо.


hide toggle jquery show-hide appendto
person syntaxcode    schedule 20.09.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте использовать :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/

person guest271314    schedule 20.09.2015
comment
Извините, что спрашиваю еще раз - guest271314 ... как заменить диапазон: содержит (кнопка скрыть/развернуть 1) идентификатором или классом диапазона? ... если вы не возражаете. то есть ‹span id=spanid›Кнопка скрытия/расширения 1‹/span› - person syntaxcode; 20.09.2015

arrow_upward
1
arrow_downward

Вы можете попробовать это:

$('.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`.

person Beginner    schedule 20.09.2015