时间戳

首页 > 解决方案 > 合并手风琴菜单和jQuery轮播

javascript - 合并手风琴菜单和jQuery轮播

问题描述

使用 jQuery，我制作了一个带有上一个/下一个按钮和一个可折叠/手风琴菜单的轮播。然后我将手风琴菜单作为幻灯片放入轮播中，这样我就可以拥有多个手风琴菜单，这些菜单在单击按钮时会随着滑动动画而变化。

我想很好地找到按钮。我应该如何调整 HTML 和 CSS 以找到内容末尾下方的按钮？我正在尝试在轮播下方添加一个 div class="footer" ，其中包括两个按钮，因此每当用户单击该按钮时。包含按钮的 div 不会移动并停留在那里，只有上面的内容（一个手风琴菜单）会滑动。

这是小提琴：http: //jsfiddle.net/ykbgT/11656

当前的 HTML 结构是这样的：

<div id="carousel">
    <div class="slide">Accordian menu content 1</div>
    <div class="slide">Accordian menu content 2</div>
    <div class="slide">Accordian menu content 3</div>
</div>

<button id="left" class="prev" >&larr;Previous</button>
<button id="right"  class="next">Next&rarr;</button>

以下是预期的结果： 在此处输入图像描述

标签： javascriptjqueryhtmlcss

解决方案

为了始终将您的按钮定位在内容的末尾，我选择删除“#carousel”上的绝对位置并在每次调整窗口大小时更改其高度，单击手风琴按钮或单击上一个下一个按钮。

我还从 css 中的每张幻灯片中删除了 100% 的高度，因为现在命令“#carousel”高度。

最后，我将您的下一个上一个按钮放在页脚（如您所说）中的静态位置，以便它可以在“#carousel”高度变化时改变位置。

//treat header and content seperatly to manage css and icon

//initial display of the first element

    $(".slide").each(function() {
        $(".collapsible", this).first().toggleClass("active").next().show()
    })
    $(".collapsible").on("click", function()    {
        //in case of clicking again the same element already open
        if($(this).hasClass("active"))  return
        //closing other contents
        $(".active").toggleClass("active").next().slideUp("fast",function(){
            currentHeigh(); // My addition
        });
      
      $header = $(this);
      //getting the next sibling element
      $content = $header.next();
      
        $header.toggleClass("active")
      $content.slideToggle("fast")
      
    });

      $("#carousel").children().first().addClass("current").css("left", "0%")
      $("#left").hide()
       
      $(".prev, .next").on("click", function() {
        $currentDiv = $(".current");
        //console.log($currentDiv)
        
        if($currentDiv.is(":animated")) return; // Don't register clicks if it's animating

        var isNext = $(this).is(".next"),
            w = $currentDiv.width() ;
        //animate the current div to the left and place it on the right side (out of the screen)
        $currentDiv.animate({
            //left: '-100%'
                left: (isNext ? '-100%' : '100%')
        }, 500, function()  {
            //$("#carousel").css({"height":$currentDiv.height()})
            //$currentDiv.css('left', (isNext ? '-100%' : '100%'))
            //$currentDiv.appendTo('#container');
        }).removeClass("current");
        //bring the before/next div onto the screen
        $nextDiv = (isNext ? $currentDiv.next() : $currentDiv.prev())

        $nextDiv.css('left', (isNext ? '100%' : '-100%'))
        $nextDiv.animate({
            left: '0%'
        }, 500, function() {
            
        })
        
        $nextDiv.css('left', '100%').addClass("current");
        currentHeigh();  // My addition
        
        
        
        
        var isFirst = $("#carousel").children().first().hasClass("current");
        var isLast = $("#carousel").children().last().hasClass("current");
        isFirst ? $("#left").hide() : $("#left").show();
        isLast ? $("#right").hide() : $("#right").show();
        
      });

         // My addition

        currentHeigh()

        function currentHeigh(){
           // In this function I check the height of the div with .current class (with its margin and padding) and set it on #carousel div so we are sure that now #carousel and .current div have same height. 'cause #carousel now is in static position (the default one), every other div is positioned immediately below (i.e. footer in this case)
            $("#carousel").animate({
                height: $(".current").outerHeight()
            }, 100)
           
        }

        var resize;
          $(window).resize(function() {
          // put a simple time out to trigger currentHeigh() only when resize action finish
            clearTimeout(resize);
            resize = setTimeout(resizeStuff, 200);
          });
          
          function resizeStuff() {
            currentHeigh()
          }
body{
            overflow-x:hidden;
        }
             *{
 box-sizing:border-box;
 }
h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
h3 {
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
h4 {
    display: block;
    -webkit-margin-before: 1.33em;
    -webkit-margin-after: 1.33em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
h5 {
    display: block;
    font-size: 0.83em;
    -webkit-margin-before: 1.67em;
    -webkit-margin-after: 1.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
h6 {
    display: block;
    font-size: 0.67em;
    -webkit-margin-before: 2.33em;
    -webkit-margin-after: 2.33em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
#carousel {
    /*position: absolute;*/
    background-color:#ffffff;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

button {
  /*position: absolute;*/
  padding: 1em;
  border-radius: 0.3em;
  overflow:hidden;
}
.prev{
  /*bottom: 2em;
  left: 2em;*/
  float:left;
  margin-left:1em;
}
.next{
  /*bottom: 2em;
  right: 2em;*/
   float:right;
   margin-right:1em;
}
.slide {
    position: absolute;
    width: 100%;
    /*height: 100%;*/
    margin-left: 0%;
    left: 200%;
    
    padding: 1em;
    overflow-x: hidden;
    overflow-y: visible;
}
/*
.box{
    font-size: 50px;
    text-align: center;;
}
*/
.slide > div, .slide > button{
  position: relative;
}
.collapsible {
  background-color: #666;
  color: white;
  cursor: pointer;
  padding: 1em;
  width: 100%;
  border: solid 1px #222;
  border-radius: 0.3em;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active {
  background-color: #333;
}
@media (hover: hover) {
  .collapsible:hover {
    background-color: #777;
  }
}
.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.slide > .content {
  padding: 18px 18px;
  /* max-height: 0; */
  background-color: #f1f1f1;
  border-radius: 5px;
  display: none;
}
.footer {
  padding: 5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel">
    
    <div class="slide">
      <h3>Please complete your meal selection.</h3>
      <h1>Breakfast</h1>
      <button class="collapsible">Entrees Limit 2</button>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <button class="collapsible">Beverages Limit 2</button>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <button class="collapsible">Sides Limit 3</button>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <button class="collapsible">Hot Cereal Limit 1</button>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <button class="collapsible">Condiments</button>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
     
    </div>
    
     <div class="slide">
      <h3>Please complete your meal selection.</h3>
      <h1>Lunch</h1>
      <button class="collapsible">Lunch-select 1 option</button>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <button class="collapsible">Beverages Limit 2</button>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>

     <div class="slide">
      <h3>Please complete your meal selection.</h3>
      <h1>Dinner</h1>
      <button class="collapsible">Dinner-select 1 option</button>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <button class="collapsible">Beverages Limit 2</button>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>

</div>
<footer>
 <button id="left" class="prev" >&larr;Previous</button>
 <button id="right"  class="next">Next&rarr;</button> 
</footer>

推荐阅读