Отдельное отображение/скрытие jquery?

Question

У меня проблема с разборчивым кодом jquery.

Я хотел бы отделить некоторые DIV, но если я нажму на элемент, в зависимости от того, что это такое, он откроет все остальные элементы. Я должен использовать больше, чем эти складные вещи (примерно 40 штук, потому что на одной странице много версий, и мне нужно сэкономить место). Я хотел бы знать, как отделить DIV друг от друга. Вот мой код:

<script type="text/javascript" 
src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $(".flip").click(function() { 
    $(".panel").slideToggle("slow"); 
    }); 
}); 
</script> 

<style type="text/css"> 
div.panel,p.flip { 
margin: 0px; 
padding: 5px; 
text-align: center; 
background: #FFCFF9; 
border: solid 1px #fff; 
} 

div.panel { 
widht: 50%; 
height: 100px; 
display: none; 
} 
</style> 
</head> 
<div class="panel" id="1"> 
    <p>Fist panel text</p> 
</div> 
<p class="flip" id="1">1st version</p> 
<div class="panel" id="2"> 
    <p>Second panel text</p> 
</div> 
<p class="flip" id="2">2nd version</p> 

Сначала я попытался это: http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm Но была проблема, а; он показывает только содержание первого DIV, остальные не спускаются. Я не знаю, следует ли мне называть DIV (как вы можете видеть в коде, я это пробовал) или нет, но если я это сделаю, я не знаю, как это сделать. Пожалуйста, помогите мне, если сможете. Спасибо!

Answer 1

Настоящая скрипка JS с рабочей версией.

https://jsfiddle.net/b3bc4yk6/

Основная причина ваш код не работает, что вы не целились в DIV вы хотите расширить/контракт, вы целились их всех. Как вы можете видеть из HTML, я дал каждой панели свой собственный идентификатор.

<div class="panel" id="panel-1"> 
    <p>Fist panel text</p> 
</div> 
<p class="flip" id="1">1st version</p> 
<div class="panel" id="panel-2"> 
    <p>Second panel text</p> 
</div> 
<p class="flip" id="2">2nd version</p> 

Также обратите внимание, что идентификатор должен быть уникальным, поэтому элемент флип и элемент панели не должны иметь одинаковый идентификатор.

Теперь в jquery мы можем получить идентификатор флип и настроить конкретную панель.

$(document).ready(function() { 
    $(".flip").click(function() { 
    $("#panel-" + $(this).attr('id')).slideToggle("slow"); 
    }); 
}); 

Надеюсь, что помогло!

Answer 2

Прежде всего, я хотел бы напомнить вам, что идентификаторы должны быть уникальными. В вашем примере есть два элемента с id = "1" и два с id = "2".

Вы также можете обернуть каждую панель/флип-комбо внутри контейнера div.

Html:

<div class="panelContainer"> 
    <div class="panel"> 
     <p>Fist panel text</p> 
    </div> 
    <p class="flip" id="1">1st version</p> 
</div> 
<div class="panelContainer"> 
    <div class="panel" id="2"> 
     <p>Second panel text</p> 
    </div> 
    <p class="flip" id="2">2nd version</p> 
</div> 

В ваших JS вы поставите функцию щелчка для каждого элемента с классом «флип», чтобы переключить все элементы с классом «панели».

Что вы хотите сделать, это переключить панель, соответствующую щелчку щелчка.

Js:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $(".flip").each(function(){ 
     $(this).click(function() { 
       $(this).closest(".panelContainer").find(".panel").slideToggle("slow"); 
      }); 
     }); 
     }); 
    </script> 

не проверял код, но вы должны получить общее представление.

Answer 3

попробовать это:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $(".flip").click(function() { 
     $(this).next(".panel").slideToggle("slow"); 
    }); 
    }); 
</script>