показать/скрыть те же идентификаторы

Question

Я много искал в Stackoverflow, решение для моего вопроса, но никто из них не помог мне. У меня есть множественное содержимое show/hide (toggle), с теми же идентификаторами, и я хочу сделать, что открывается только один из них, что мне нужно, а не все из них. Там мой JSFiddle Вы можете проверить его.

Это мой JavaScript

$("#view").click(function(){ 
    $('.hidden-content').slideToggle(500).toggleClass("active"); 
}); 

Answer 1

Вы не можете иметь повторяющиеся id атрибуты в одном документе. Когда вы делаете только первый элемент с данным id; следовательно, проблема, которую вы видели.

Вместо изменение view элементов, чтобы использовать класс, а затем использовать this ссылки внутри обработчика событий click для обхода DOM, чтобы найти соответствующие .hidden-content элемента и переключения его. Попробуйте это:

$(".view").click(function() { 
 
    $(this).closest('.div').find('.hidden-content').slideToggle(500).toggleClass("active"); 
 
});

.div { 
 
    width: 400px; 
 
} 
 
.content { 
 
    padding: 10px; 
 
} 
 
.view { 
 
    color: red; 
 
    cursor: pointer; 
 
} 
 
.hidden-content { 
 
    display: none; 
 
} 
 
.hidden-content .active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div"> 
 
    <div class="content"> 
 
    <div class="view">view/edit</div> 
 
    </div> 
 
    <div class="hidden-content"> 
 
    hidden content 
 
    </div> 
 
</div> 
 

 
<div class="div"> 
 
    <div class="content"> 
 
    <div class="view">view/edit</div> 
 
    </div> 
 
    <div class="hidden-content"> 
 
    hidden content 
 
    </div> 
 
</div> 
 

 
<div class="div"> 
 
    <div class="content"> 
 
    <div class="view">view/edit</div> 
 
    </div> 
 
    <div class="hidden-content"> 
 
    hidden content 
 
    </div> 
 
</div>

Answer 2

Это плохая практика, чтобы использовать тот же идентификатор для более чем элементов.

Вы можете попробовать следующее

<div class="div"> 
    <div class="content"> 
    <div class="view">view/edit</div> 
    </div> 
<div class="hidden-content"> 
    hidden content 
</div> 

и ваш JQuery будет выглядеть следующим образом

$(".view").click(function(){ 
    $(this).parent('.content').next('.hiddencontent').slideToggle(500).toggleClass("active"); 
}); 

Answer 3

Вы можете изменить ваш щелкните событие следующим образом, чтобы сделать его работу.

$("div[id='view']").click(function() { 
    $(this).parent().next().slideToggle(500).toggleClass("active"); 
}); 

Примечание: Вы не должны иметь один и тот же идентификатор для нескольких элементов, значение атрибута ID должно быть уникальным, почему, так как атрибут идентификатора используется для идентификации элемента однозначно в DOM. Вы можете иметь одно и то же имя класса для разных элементов.

См. Это answer. Он содержит дополнительную информацию о том, как все работает, когда несколько элементов имеют одинаковое значение атрибута id.

$("div[id='view']").click(function() { 
 
    $(this).parent().next().slideToggle(500).toggleClass("active"); 
 
});

.div { 
 
    width: 400px; 
 
} 
 
.content { 
 
    padding: 10px; 
 
} 
 
#view { 
 
    color: red; 
 
    cursor: pointer; 
 
} 
 
.hidden-content { 
 
    display: none; 
 
} 
 
.hidden-content .active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div class="div"> 
 
    <div class="content"> 
 
    <div id="view">view/edit</div> 
 
    </div> 
 

 
    <div class="hidden-content"> 
 
    hidden content 
 
    </div> 
 
</div> 
 

 
<div class="div"> 
 
    <div class="content"> 
 
    <div id="view">view/edit</div> 
 
    </div> 
 

 
    <div class="hidden-content"> 
 
    hidden content 
 
    </div> 
 
</div> 
 

 
<div class="div"> 
 
    <div class="content"> 
 
    <div id="view">view/edit</div> 
 
    </div> 
 

 
    <div class="hidden-content"> 
 
    hidden content 
 
    </div> 
 
</div> 
 

 
<div class="div"> 
 
    <div class="content"> 
 
    <div id="view">view/edit</div> 
 
    </div> 
 

 
    <div class="hidden-content"> 
 
    hidden content 
 
    </div> 
 
</div>

Answer 4

Вы должны заменить id на class. А для аккордеона вы можете использовать, как показано ниже.

HTML,

<div class="div"> 
    <div class="content"> 
     <div class="view">view/edit</div> 
    </div> 

    <div class="hidden-content"> 
     hidden content 
    </div> 
</div> 
<div class="div"> 
    <div class="content"> 
     <div class="view">view/edit</div> 
    </div> 

    <div class="hidden-content"> 
     hidden content 
    </div> 
</div> 

<div class="div"> 
    <div class="content"> 
     <div class="view">view/edit</div> 
    </div> 

    <div class="hidden-content"> 
     hidden content 
    </div> 
</div> 

<div class="div"> 
    <div class="content"> 
     <div class="view">view/edit</div> 
    </div> 

    <div class="hidden-content"> 
     hidden content 
    </div> 
</div> 

Js,

<script> 

$(document).ready(function(){ 
    $(".hidden-content").hide(); 
    $(".view").on('click', function(){ 

     $(this).parents().parents().find(".hidden-content").slideToggle(500).toggleClass("active"); 

     if($(this).parents().parents().siblings().find(".hidden-content").hasClass('active')){ 
      $(this).parents().parents().siblings().find(".hidden-content").removeClass('active'); 
      $(this).parents().parents().siblings().find(".hidden-content").hide(); 
     } 
    }); 
}); 

</script>