合并手风琴菜单和jQuery轮播

Question

使用 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> 

以下是预期结果：

Answer 1

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

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

最后，我将你的 next-prev 按钮放在页脚（如你所说）中的静态位置，这样它就可以在“#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>