Question

我在滑块中创建了jquery下拉菜单。并想更改其视图状态，例如““ https://jsfiddle.net/user23435/tzrunfjd/1/”，然后在https://ibb.co/QdRWqRy这样的下拉菜单中添加了幻灯片效果。如果我单击一张幻灯片，它将打开，但是单击另一张幻灯片，将其关闭，然后再次单击它，它将打开https://jsfiddle.net/user23435/tzrunfjd/1/，如何将其应用于我的代码，如下所示< / p>

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

根据需要在jquery html变量中使用jsfiddle链接html代码，但要小心其类名，因为这些类会处理该功能并在脚本标记中使用此mainmenu函数。

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

，但是在setMeetingCarausel函数的末尾调用此mainmenu函数。这个mainmenu函数在setMeetingCarausel内部而不是外部调用。 jQuery（document）.mouseup函数在脚本标签的末尾使用。

jQuery的jsfiddle示例不适用于jQuery代码

1 个答案: