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

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。

尝试手工重新发明轮子通常是不值得的。 完成您想要的目标的正确解决方案是使用“ 旋转木马 ”插件。 （许多人创建了这样的插件。您可以简单地用谷歌搜索它。）

如果您使用的是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的next按钮

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