Применить эффект переключения слайда динамически при щелчке всех div

При нажатии на конкретный элемент li - я хочу, чтобы он мог открыть соответствующий элемент div.

У меня есть следующий код:

<ul class="no-padding pro-list">
    <li><a href="#" class="pro-1 pro">A</a>
        <div class="proc-description panel-1">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>
                Lorem ipsum doner inut.
                    Lorem ipsum doner inut.
            </p>
        </div>
    </li>
    <li><a href="#" class="pro-2 pro">B</a>
        <div class="proc-description panel-2">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>
                Lorem ipsum doner inut.
                    Lorem ipsum doner inut.
            </p>
        </div>
    </li>
    <li><a href="#" class="pro-3 pro">C</a>
        <div class="proc-description panel-3">
            <p>a</p>
            <p>b</p>
            <p>c</p>
        </div>
    </li>
    <li><a href="#" class="pro-4 pro">D</a>
        <div class="proc-description panel-4">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>
                Lorem ipsum doner inut.
                    Lorem ipsum doner inut.
            </p>
        </div>
    </li>
    <li><a href="#" class="pro-5 pro">E</a>
        <div class="proc-description panel-5">
            Hello world! Lorem ipsum doner inut.
                        <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>
                Lorem ipsum doner inut.
                    Lorem ipsum doner inut.
            </p>
        </div>
    </li>
    <li><a href="#" class="pro-6 pro">F</a>
        <div class="proc-description panel-6">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>
                Lorem ipsum doner inut.
                    Lorem ipsum doner inut.
            </p>
        </div>
    </li>
    <li><a href="#" class="pro-7 pro">G</a>
        <div class="proc-description panel-7">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>
                Lorem ipsum doner inut.
                    Lorem ipsum doner inut.
            </p>
        </div>
    </li>
    <li><a href="#" class="pro-8 pro">H</a>
        <div class="proc-description panel-8">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>
                Lorem ipsum doner inut.
                    Lorem ipsum doner inut.
            </p>
        </div>
    </li>
    <li><a href="#" class="proc-9 ">I</a></li>
    <li><a href="#" class="proc-10 ">J</a></li>
    <li><a href="#" class="proc-11 ">K</a></li>
</ul>

Он отлично работает, когда я добавляю этот script:

<script>
    jQuery(document).ready(function ($) {
        jQuery(".pro-2").click(function () {
            jQuery(".panel-2").slideToggle("slow");
        });
    });
</script>

Однако я хочу сделать его динамичным. Вместо того, чтобы делать так много функций для каждого класса и класса div, я хочу создать 1 функцию, которая может переключать все элементы li.

Ответы

Ответ 1

Решение этой проблемы находится здесь:

<script> 
       jQuery(document).ready(function($){
            jQuery("ul.pro-list a.pro").click(function(e){
               e.preventDefault();
                jQuery(this).next('div').slideToggle("slow");
           });

</script>

где e - событие, а preventDefault() предотвращает привязку ссылок, что означает, что он не перенаправляет ссылки на "ссылки", t перенаправляет на ссылку, работает эффект переключения.

Ответ 2

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

Вы можете использовать уже добавленный класс pro, добавленный в anchor и proc-description, добавленный в div.

Использование

jQuery(document).ready(function($){
    jQuery("a.pro").click(function(){
       jQuery(this).next(".proc-description").slideToggle("slow");
   return false; 
  });            
});

jQuery(document).ready(function($){
    jQuery("a.pro").click(function(){
       jQuery(this).next(".proc-description").slideToggle("slow");
      
   });            
});

.proc-description {display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="no-padding pro-list">
    <li><a href="#" class="pro-1 pro">A</a>

        <div class="proc-description panel-1">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
        </div>
    </li>
    <li><a href="#" class="pro-2 pro">B</a>

        <div class="proc-description panel-2">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
        </div>
    </li>
    <li><a href="#" class="pro-3 pro">C</a>

        <div class="proc-description panel-3">
            <p>a</p>
            <p>b</p>
            <p>c</p>
        </div>
    </li>
    <li><a href="#" class="pro-4 pro">D</a>

        <div class="proc-description panel-4">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
        </div>
    </li>
    <li><a href="#" class="pro-5 pro">E</a>

        <div class="proc-description panel-5">Hello world! Lorem ipsum doner inut.
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
        </div>
    </li>
    <li><a href="#" class="pro-6 pro">F</a>

        <div class="proc-description panel-6">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
        </div>
    </li>
    <li><a href="#" class="pro-7 pro">G</a>

        <div class="proc-description panel-7">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
        </div>
    </li>
    <li><a href="#" class="pro-8 pro">H</a>

        <div class="proc-description panel-8">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
        </div>
    </li>
    <li><a href="#" class="proc-9 ">I</a>
    </li>
    <li><a href="#" class="proc-10 ">J</a>
    </li>
    <li><a href="#" class="proc-11 ">K</a>
    </li>
</ul>

Ответ 3

Другой метод, если вы хотите: -

<ul class="no-padding pro-list">
<li><a href="javascript:void(0)" class="pro-1 pro" onclick="$(this).parent().find('.proc-description').toggle();">A</a>
    <div class="proc-description panel-1">
        <p>Lorem ipsum doner inut.</p>
        <p>Lorem ipsum doner inut.</p>
        <p>
            Lorem ipsum doner inut.
                Lorem ipsum doner inut.
        </p>
    </div>
</li>
<li><a href="javascript:void(0)"class="pro-2 pro" onclick="$(this).parent().find('.proc-description').toggle();">B</a>
    <div class="proc-description panel-2">
        <p>Lorem ipsum doner inut.</p>
        <p>Lorem ipsum doner inut.</p>
        <p>
            Lorem ipsum doner inut.
                Lorem ipsum doner inut.
        </p>
    </div>
</li>
<li><a href="javascript:void(0)" class="pro-3 pro" onclick="$(this).parent().find('.proc-description').toggle();">C</a>
    <div class="proc-description panel-3">
        <p>a</p>
        <p>b</p>
        <p>c</p>
    </div>
</li>
<li><a href="javascript:void(0)" class="pro-4 pro" onclick="$(this).parent().find('.proc-description').toggle();">D</a>
    <div class="proc-description panel-4">
        <p>Lorem ipsum doner inut.</p>
        <p>Lorem ipsum doner inut.</p>
        <p>
            Lorem ipsum doner inut.
                Lorem ipsum doner inut.
        </p>
    </div>
</li>
<li><a href="javascript:void(0)" class="pro-5 pro" onclick="$(this).parent().find('.proc-description').toggle();">E</a>
    <div class="proc-description panel-5">
        Hello world! Lorem ipsum doner inut.
                    <p>Lorem ipsum doner inut.</p>
        <p>Lorem ipsum doner inut.</p>
        <p>
            Lorem ipsum doner inut.
                Lorem ipsum doner inut.
        </p>
    </div>
</li>
<li><a href="javascript:void(0)" class="pro-6 pro" onclick="$(this).parent().find('.proc-description').toggle();">F</a>
    <div class="proc-description panel-6">
        <p>Lorem ipsum doner inut.</p>
        <p>Lorem ipsum doner inut.</p>
        <p>
            Lorem ipsum doner inut.
                Lorem ipsum doner inut.
        </p>
    </div>
</li>
<li><a href="javascript:void(0)" class="pro-7 pro" onclick="$(this).parent().find('.proc-description').toggle();">G</a>
    <div class="proc-description panel-7">
        <p>Lorem ipsum doner inut.</p>
        <p>Lorem ipsum doner inut.</p>
        <p>
            Lorem ipsum doner inut.
                Lorem ipsum doner inut.
        </p>
    </div>
</li>
<li><a href="javascript:void(0)" class="pro-8 pro" onclick="$(this).parent().find('.proc-description').toggle();">H</a>
    <div class="proc-description panel-8">
        <p>Lorem ipsum doner inut.</p>
        <p>Lorem ipsum doner inut.</p>
        <p>
            Lorem ipsum doner inut.
                Lorem ipsum doner inut.
        </p>
    </div>
</li>
<li><a href="javascript:void(0)" class="proc-9 " onclick="$(this).parent().find('.proc-description').toggle();">I</a></li>
<li><a href="javascript:void(0)" class="proc-10 " onclick="$(this).parent().find('.proc-description').toggle();">J</a></li>
<li><a href="javascript:void(0)" class="proc-11 " onclick="$(this).parent().find('.proc-description').toggle();">K</a></li>

<style>
.proc-description{
    display: none;
}