Пример jsfiddle jQuery не применяется к коду jQuery

Question

Я создал jquery выпадающее меню в слайдере. и хочет изменить свое состояние просмотра как "" https://jsfiddle.net/user23435/tzrunfjd/1/ "", и я добавил эффект слайда в выпадающее меню, как это https://ibb.co/QdRWqRy. Если я щелкну один слайд, он откроется, но, щелкнув другой слайд, предыдущий закроется, а затем, щелкнув его снова, откроется ,,,,,,,,, Как я могу применить это https://jsfiddle.net/user23435/tzrunfjd/1/ к моему коду, который дается ниже

html код:

 <div class="carousel slide col-md-10 col-xs-12" data-ride="carousel" data-interval="false" 
    id="myCarousel">
 </div>

jQuery код:

   $('.create-meeting-btn').click(function(){
     $('.create-meeting-form').stop().slideToggle();   //stop or delay(1000)
   });

  $('.upcoming-btn').click(function(){
      $('.upcoming-table').stop().slideToggle(); 
  });

  $('.completed-btn').click(function(){
      $('.completed-table').stop().slideToggle();
  }); 

  $('#myCarousel').carousel({
     pause: true,
     interval: false,
  });


 function setMeetingCarausel() {
   let meetingsCopy = utils.setSliders(Array.from(meetings));

   let html = '<div class="carousel-inner no-padding">';

 meetingsCopy.map((meeting, index) => {
      html += `<div class="item ${index === 0 ? 'active' : ''}">`;
      meeting.map(m => {
      let className = m.status === 'completed' ? 'btn btn-warning btn-lg dashboard-icon' : 'btn btn-success   
     btn-lg dashboard-icon'
 html += `
    <div class="col-md-3 col-sm-6 col-xs-12" onclick="handleClickMeetingItem('${m._id}')">
       <span href="" class="${className}" style="width: 200px; height: 150px;">
       <p style="padding-top: 10px; font-size: 19px; font-weight: bold;">${m.subject}</p>
       <p style="padding-top: 12px; font-size: 19px; font-weight: bold;">${utils.convertDate(m.date)}</p>
       <p style="padding-top: 10px; font-size: 19px; font-weight: bold;">( ${m.status} )</p>
      </span>
  </div>
  `;
  });
   html += `</div>`;
  })
 html += `
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" style="margin-left:63px; color:grey;"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" style="margin-right:140px; color:grey;"></span>
  </a>
 `;

  $('#myCarousel').html(html);
}

Answer 1

Используйте код ссылки jsfiddle html в своей переменной jquery html так, как вы хотите, но будьте осторожны с именами классов, поскольку эти классы обрабатывают функциональность и используют эту функцию mainmenu в теге script как она.

   function mainmenu(){
    jQuery(".topm").click(function(){
    jQuery('.content').slideUp("fast");
    jQuery(this).find('.content').slideDown("fast");
   });
   }

но вызовите эту функцию mainmenu в конце вашей функции setMeetingCarausel. Этот вызов функции mainmenu внутри setMeetingCarausel не снаружи. jQuery (документ). Используйте функцию .mouseup в конце тега скрипта.