Question

在我的应用程序中，div中有很多按钮。

最初，我将显示三个div宽度为400 px的按钮。溢出：隐藏将隐藏其余元素。我在div的css下面添加了，在我的应用程序中具有向右箭头按钮。任何人都可以告诉我，如果用户单击箭头按钮，可以显示jquery中占用相同宽度的下一个按钮元素吗？如果用户再次单击，则需要显示剩余的元素，直到最后一个元素

我的html结构在下面

.parentdiv {
  display: inline-flex width:400px;
  overflow: hidden;
}

<div class="parentdiv">
  <div class="childdiv">
    <span> Text1 
      <button>button1 </button>
    </span>
  </div>
  <div class="childdiv">
    <span> Text2 lorem ipsum 
      <button>button2 </button>
    </span>
  </div>
  <div class="childdiv">
    <span> Text3 lorem ipsum 
      <button>button3 </button>
    </span>
  </div>
  <div class="childdiv">
    <span> Text4 lorem ipsum 
      <button>button4 </button>
    </span>
  </div>
  <div class="childdiv">
    <span> Text5 lorem ipsum 
      <button>button5 </button>
    </span>
  </div>
  <div class="childdiv">
    <span> Text6 lorem ipsum 
      <button>button6 </button>
    </span>
  </div>

Answer 1

您想做的是...。比您想象的要复杂得多，并且需要很多的javascript。

尝试手工重新发明轮子通常是不值得的。完成您想要的操作的正确解决方案是使用“ 轮播”插件。（许多人创建了这样的插件。您可以简单地在Google上搜索它。）

如果您使用的是Wordpress，则应搜索Wordpress插件。

如果您只是想要一个可以在任何网站上使用的即插即用解决方案，那么Slick是我所知道的最好的轮播插件，并且可以与jQuery完美配合。

Answer 2

使用 jQuery 可以实现。 需要jQuery库

clicked = 1;
divSW = document.getElementByClassName('parentdiv').scrollWidth;
$('button#nxtBtn').click(function(){
    divSL = $('div.parentdiv').scrollLeft();
    if(divSW > divSL){
        clicked++;
        divW = $('div.parentdiv').width();
        moveW = divW * clicked;
        $('div.parentdiv').animate({
            scrollLeft : moveW
        })
    }
})

但是您需要在HTML代码中添加一个下一步按钮，其 id 属性为 nxtBtn

<button id="nxtBtn">next</button>

如果您需要在div中查看以前的按钮，则将另一个ID为 prvBtn 的按钮添加到HTML代码中。

<button id="prvBtn">previous</button>

然后，您还要在下面添加此代码

$('button#prvBtn').click(function(){
    divSL = $('div.parentdiv').scrollLeft();
    if(divSL > 0){
        clicked--;
        divW = $('div.parentdiv').width();
        moveW = divW * clicked;
        $('div.parentdiv').animate({
            scrollLeft : moveW
        })
    }
})

Answer 3

$("#after").on("click", function() {
  for (var i = 0; i < 3; i++)
    $(".childdiv:not(.show)").eq(0).addClass("show");
});

#after {
  background: lightgrey;
  display: block;
  width: 250px;
  text-align: center;
  padding: 2px 0;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 5px;
}

#after:hover {
  text-decoration: underline;
}

.childdiv {
  display: none;
}

.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parentdiv">
  <div class="childdiv show">
    <span> Text1 
      <button>button1 </button>
    </span>
  </div>
  <div class="childdiv show">
    <span> Text2 lorem ipsum 
      <button>button2 </button>
    </span>
  </div>
  <div class="childdiv show">
    <span> Text3 lorem ipsum 
      <button>button3 </button>
    </span>
  </div>
  <div class="childdiv">
    <span> Text4 lorem ipsum 
      <button>button4 </button>
    </span>
  </div>
  <div class="childdiv">
    <span> Text5 lorem ipsum 
      <button>button5 </button>
    </span>
  </div>
  <div class="childdiv">
    <span> Text6 lorem ipsum 
      <button>button6 </button>
    </span>
  </div>
  <a id="after">after \/</a>
</div>

如何在div jquery中显示溢出隐藏元素

3 个答案: