Question

使用jQuery，我制作了带有上一个/下一个按钮和可折叠/手风琴菜单的轮播。

我正在尝试将手风琴放入一张转盘中，以便在一张转盘中有多个手风琴菜单。我制作了它们，但未指定像素，因为我希望它们对移动设备友好。

当我尝试将手风琴放入转盘中时，该转盘不能很好地显示手风琴菜单。搞砸了。

有人可以帮忙，让我知道问题出在哪里吗？

谢谢

轮播代码：

//treat header and content seperatly to manage css and icon

//initial display of the first element
$(".collapsible").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");

  $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() {
    //$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");

  var isFirst = $("#carousel").children().first().hasClass("current");
  var isLast = $("#carousel").children().last().hasClass("current");
  isFirst ? $("#left").hide() : $("#left").show();
  isLast ? $("#right").hide() : $("#right").show();

});

#carousel {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;  
}

button {
  position: absolute;
  bottom: 0;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 50px;
    text-align: center;
    left: 200%;
    margin-left: 0%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel">

  <div id="box1" class="slide">Div #1</div>
  <div id="box2" class="slide">Div #2</div>
  <div id="box3" class="slide">Div #3</div>
  <div id="box4" class="slide">Div #4</div>
  <div id="box5" class="slide">Div #5</div>


</div>
<div>


  <button id="left" class="prev">&larr;Previous</button>
  <button id="right" class="next" style="right:0 ">Next&rarr;</button>

</div>

http://jsfiddle.net/ykbgT/11534/

手风琴

 $( function() {
//treat header and content seperatly to manage css and icon

//initial display of the first element
$(".collapsible").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");
  
  $header = $(this);
  //getting the next sibling element
  $content = $header.next();
  
	$header.toggleClass("active")
  $content.slideToggle("fast")
});

  } );

.collapsible {
  background-color: #666;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: solid 1px #222;
  border-radius: 5px;
  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";
}

.content {
  padding: 0 18px;
  /* max-height: 0; */
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  border-radius: 5px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <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>

</body>

http://jsfiddle.net/9oqt1eyz/87

Answer 1

您正在为手风琴上的绝对位置苦苦挣扎。您应该在所有幻灯片中添加另一个类（我已经添加了box类），并将carousal样式设置为box类。

为我工作的班级如下：

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    margin-left: 0%;
}
.box{
    font-size: 50px;
    text-align: center;
    left: 200%;
}

.accordian > div, .accordian button{
  position: relative;
}

代码段如下：您也可以在此处进行测试-http://jsfiddle.net/ykbgT/11570/

//treat header and content seperatly to manage css and icon

//initial display of the first element
$(".collapsible").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");
  
  $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()	{
        //$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");
    
    var isFirst = $("#carousel").children().first().hasClass("current");
    var isLast = $("#carousel").children().last().hasClass("current");
    isFirst ? $("#left").hide() : $("#left").show();
    isLast ? $("#right").hide() : $("#right").show();
    
  });

#carousel {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;  
}

button {
  position: absolute;
  bottom: 0;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    margin-left: 0%;
}
.box{
    font-size: 50px;
    text-align: center;
    left: 200%;
}

.accordian > div, .accordian button{
  position: relative;
}
.collapsible {
  background-color: #666;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: solid 1px #222;
  border-radius: 5px;
  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";
}

.content {
  padding: 0 18px;
  /* max-height: 0; */
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  border-radius: 5px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="carousel">
    
    <div id="box0" class="slide accordian">
      <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 id="box1" class="slide box">Div #1</div>
    <div id="box2" class="slide box">Div #2</div>
    <div id="box3" class="slide box">Div #3</div>
    <div id="box4" class="slide box">Div #4</div>
    <div id="box5" class="slide box">Div #5</div>
  

</div>
<div>


 <button id="left" class="prev" >&larr;Previous</button>
 <button id="right"  class="next" style="right:0 ">Next&rarr;</button> 

</div>

合并涉及CSS和jQuery的两个HTML

1 个答案: