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”高度。

最后，我将您的下一个上一个按钮放在页脚（如您所说）中的静态位置，以便在“ #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>

合并手风琴菜单和jQuery轮播

1 个答案: