jquery все разделы, открывающиеся и закрывающиеся при нажатии переключателя

ProgramBox

jquery все разделы, открывающиеся и закрывающиеся при нажатии переключателя

Post author:admin
Запись опубликована:23 апреля, 2023
Post category:Вопросы по программированию

#jquery

Вопрос:

Когда я нажимаю на ссылку, все divs с соответствующими классами открываются и закрываются.

Как мне применить функцию .this к jquery? у меня есть этот код, я хотел бы активировать только тот, на который нажат

 $(document).ready(function(){   
    //On Click
    $('.collapseLink').click(function(){
        $('.revealBoxContents').stop(true, true).slideToggle('slow');
    });
});

вот HTML-код, к сожалению, мне не разрешено изменять эту разметку

 <div class="revealBox revealBoxClosed">
            <div class="revealBoxTop">
                <h3>About You</h3>
           <a class="collapseLink" title="" href="javascript:void(0);"><span class="dottedBot">Hide information</span><img width="16" height="16" class="detailListActions" alt="-" src="Resources/Images/BBG/main/minus.gif"></a>              </div>
            <!-- /revealBoxTop -->
         <div class="revealBoxContents" style="display: block;">
           <div class="detailListHead pad10">
              <span class="floatLeft">Details about you </span>
             <span class="floatRight">Edit</span>
             <div class="clearBoth"></div>
           </div>

            <ul class="revealDetailsList">
              <li class="table shadedList ">
             <div class="tableRow">
              <span class="detailCell detailLabel">Your Name:</span>
              <p class="detailResult">Mr John Smith</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>

             </div><!-- /tableRow -->
                          </li>
              <li class="table">
             <div class="tableRow">
              <span class="detailCell detailLabel">Gender:</span>
              <p class="detailResult">Male</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table shadedList ">
             <div class="tableRow">
              <span class="detailCell detailLabel">Date of Birth:</span>
              <p class="detailResult">11/11/1977</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table">
             <div class="tableRow">
              <span class="detailCell detailLabel">Postal Address:</span>
              <p class="detailResult">1 Buchanan Street, Derby, Derbyshire, DE1 3BZ 1 Buchanan Street, Derby, Derbyshire, DE1 3BZ</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table shadedList ">
             <div class="tableRow">
              <span class="detailCell detailLabel">Relationship Status:</span>
              <p class="detailResult">Married</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table">
             <div class="tableRow">
              <span class="detailCell detailLabel">Daytime/Mobile Telephone:</span>
              <p class="detailResult">01977 123245</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table shadedList ">
             <div class="tableRow">
              <span class="detailCell detailLabel">Email Address:</span>
              <p class="detailResult">john.smith@email.com</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table">
             <div class="tableRow">
              <span class="detailCell detailLabel">Date you wish your insurance to start:</span>
              <p class="detailResult">2/03/2011</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table shadedList ">
             <div class="tableRow">
              <span class="detailCell detailLabel">Employment Status:</span>
              <p class="detailResult">Employed</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table">
             <div class="tableRow">
              <span class="detailCell detailLabel">Your Occupation:</span>
              <p class="detailResult">Marketing Manager</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table shadedList ">
             <div class="tableRow">
              <span class="detailCell detailLabel">Business Type:</span>
              <p class="detailResult">Insurance Broker</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table lastLi">
             <div class="tableRow">
              <span class="detailCell detailLabel">Joint Policy Holder:</span>
              <p class="detailResult">Mrs Jane Smith</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>

           </ul><!-- /revealDetails -->
                <div class="relative">
                <a class="collapseLink floatRight" title="" href="javascript:void(0);"><span class="dottedBot">Hide information</span><img width="16" height="16" class="detailListActions" alt="?" src="Resources/Images/BBG/main/minus.gif"></a>               
            </div>
         </div><!-- /revealBoxContents -->
       </div>

Ответ №1:

Вы завершаете this с помощью оператора jQuery $ :

 $(document).ready(function(){   
    //On Click
    $('.collapseLink').click(function(){
        $(this).parent().next(".revealBoxContents").stop(true, true).slideToggle('slow');
    });
});

Как упомянул один комментатор, это сработает только в том случае, если оно находится внутри ссылки. .closest() может помочь вам на месте find() , если это снаружи.

Если вы разместите свой HTML-код, мы, возможно, сможем помочь вам больше.

1. это не сработает. это переключит collapseLink, а не .revealBoxContents

2. @Fender — Добавлено find() , которое должно это исправить.

3. это работает, только если .revealBoxContents находится внутри ссылки, в противном случае вам понадобится какой-либо способ связать каждое поле содержимого со ссылкой, используя атрибут data- (тире данных)

4. Разместите часть своего HTML-кода. Доступ к элементам DOM осуществляется с помощью функций обхода. Важно знать, к чему вы хотите получить доступ и где это находится по отношению ко всему остальному.

5. уверен, что это html, мне не разрешено его изменять

Ответ №2:

это работает:

 $(document).ready(function() {
    //On Click
    $('.collapseLink').click(function() {
        $(this).parent().next('div.revealBoxContents').stop(true, true).slideToggle();
    });
});

посмотрите на этот jsfiddle:http://jsfiddle.net/RVjbY/1 /

Ответ №3:

Если ссылка находится внутри div, который вы хотите переключить, попробуйте это

 $(document).ready(function(){   
    //On Click
    $('.collapseLink').click(function(){
        $(this).parents('.revealBoxContents').stop(true, true).slideToggle('slow');
    });
});

По сути, идея состоит в том, чтобы выбрать переключающий div относительно нажатой ссылки (обычно с использованием this );

Удачного кодирования.