разверните соответствующую ul на клике

Question

как я могу развернуть ближайшее соответствующее ul.dropmenu, нажав на button1 вместо того, чтобы дать им всем отдельный идентификатор / класс?

html:

<ul class="mainlist">
            <li><img id="wall1.thumb" class="icon" src="/images/placeholder.jpg">
                <img class="button1 d1" src="/images/info.png">
                <ul class="dropmenu menu1">
                    <p id="wall1.info">
                       <div>File Size:</div>
                       <div>Upload Date:</div>
                       <div>Dimensions:</div>
                    </p>
                </ul>
            </li>
            <li><img id="wall2.thumb" class="icon" src="/images/placeholder.jpg">
                <img class="button1 d2" src="/images/info.png”>                    
                <ul class="dropmenu menu2">
                   <p id="wall2.info">
                      <div>File Size:</div>
                      <div>Upload Date:</div>
                      <div>Dimensions:</div>
                   </p>
                </ul>
           </li>
</ul>

jquery :

$(".d1").on("click", function () {
    $("ul.dropmenu.menu1").slideToggle("fast", "linear", function() {
    $("ul.dropmenu").not("ul.dropmenu.menu1").slideUp(200, "swing");
  })
})

$(".d2").on("click", function () {
    $("ul.dropmenu.menu2").slideToggle("fast", "linear", function() {
        $("ul.dropmenu").not("ul.dropmenu.menu2").slideUp(200, "swing");
  })
})

я уже видел предложенный вопрос здесь: откройте ближайший ul при нажатии jQuery однако это не решает мою проблему, потому что я пытаюсь расширить ul внутри библиотеки. внутри ул, а не только внутри ул

Answer 1

Используйте функцию siblings(), чтобы получить раскрывающееся меню рядом с нажатой кнопкой

$(".d1,.d2").on("click", function() {  
  var closestUl = $(this).siblings("ul.dropmenu")  
  closestUl.slideToggle("fast", "linear", function() {
    $("ul.dropmenu").not(closestUl).slideUp(200, "swing");
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="mainlist">
  <li>
    <img id="wall1.thumb" class="icon" src="/images/placeholder.jpg" />
    <img class="button1 d1" src="/images/info.png" />
    <ul class="dropmenu menu1">
      <p id="wall1.info">
        <div>File Size:</div>
        <div>Upload Date:</div>
        <div>Dimensions:</div>
      </p>
    </ul>
  </li>
  <li>
    <img id="wall2.thumb" class="icon" src="/images/placeholder.jpg" />
    <img class="button1 d2" src="/images/info.png" />
    <ul class="dropmenu menu2">
       <p id="wall2.info ">
         <div>File Size:</div>
         <div>Upload Date:</div>
         <div>Dimensions:</div>
       </p>
    </ul>
  </li>            
</ul>

Answer 2

$('.button1').on('click',function(){
  
var parent=$(this).parents('li');
$(parent).find('.button1').next('.dropmenu').slideToggle();
$(parent).siblings('li').find('.button1').next('.dropmenu').slideUp()
})

.dropmenu{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul class="mainlist">
            <li><img id="wall1.thumb" class="icon" src="/images/placeholder.jpg">
                <img class="button1 d1" src="/images/info.png">
                <ul class="dropmenu menu1">
                    <p id="wall1.info">
                       <div>File Size:</div>
                       <div>Upload Date:</div>
                       <div>Dimensions:</div>
                    </p>
                </ul>
            </li>
            <li><img id="wall2.thumb" class="icon" src="/images/placeholder.jpg">
                <img class="button1 d2" src="/images/info.png">                    
                <ul class="dropmenu menu2">
                   <p id="wall2.info">
                      <div>File Size:</div>
                      <div>Upload Date:</div>
                      <div>Dimensions:</div>
                   </p>
                </ul>
           </li>
</ul>

Answer 3

Использование .next()

$("img.button1").on("click", function() {  
  var closestUl = $(this).next("ul.dropmenu")  
  closestUl.slideToggle("fast", "linear", function() {
    $("ul.dropmenu").not(closestUl).slideUp(200, "swing");
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="mainlist">
  <li>
    <img id="wall1.thumb" class="icon" src="/images/placeholder.jpg" />
    <img class="button1 d1" src="/images/info.png" />
    <ul class="dropmenu menu1">
      <p id="wall1.info">
        <div>File Size:</div>
        <div>Upload Date:</div>
        <div>Dimensions:</div>
      </p>
    </ul>
  </li>
  <li>
    <img id="wall2.thumb" class="icon" src="/images/placeholder.jpg" />
    <img class="button1 d2" src="/images/info.png" />
    <ul class="dropmenu menu2">
       <p id="wall2.info ">
         <div>File Size:</div>
         <div>Upload Date:</div>
         <div>Dimensions:</div>
       </p>
    </ul>
  </li>            
</ul>