加载更多的按钮位置总是比加载的位置太远

时间：2016-02-27 04:00:50

标签： javascript jquery html css

我有一个加载更多的按钮，在点击时加载10个新隐藏的div，问题是我有40个隐藏的div并且按钮设置在40的div的末尾，即使它们被隐藏，我只是想要它的位置直接在显示的最后一个div下面，所以当你点击它时，它应该加载10个更多的隐藏div并直接下去设置在最后一个新显示的div下面。有任何想法吗？

这里是html代码（并不是按钮点击时显示的隐藏div是s的div：

b

اخبارلبنان

<html>
<head>
<script src="jquery-1.12.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="leb news.css">

<title> leb news</title>
</head>
<div class="all" dir="rtl" lang="ar">
<body>

<div class="header">
<h1>

LebNews 

<img  src="paper.gif" alt="paper" height="115" />

这是按钮的jquery：

</h1>
</div>
<div class="clockall">
<div class="clock">
<div class="list">
<TABLE id="T_Menu" height="100%" cellSpacing="0" cellPadding="0" width="181" border="0" style="float: right">
                            <TD height="100%" vAlign="top" rowSpan="2" width="181" align="center">
<TABLE id="T_Menu" height="100%" cellSpacing="0" cellPadding="0" width="181" border="0">
<TR>
    <TD style="BACKGROUND-IMAGE: url(Images/Menu/bgd.gif); BACKGROUND-ATTACHMENT: fixed; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: left top"
        vAlign="top" align="center" bgColor="transparent" height="100%">     <TABLE id="T_Menu" cellSpacing="0" cellPadding="0" width="80%" border="0">
            <TR>
                <TD vAlign="middle" align="center" height="100"><BR>
                    &nbsp;&nbsp;</TD>
            </TR>
            <TR>
                <TD></TD>
            </TR>
            <TR>
                <TD align="center"><table cellspacing="0" rules="all" border="1" id="Menu1_Ad_menu" style="border-collapse:collapse;">
<tr align="Center" style="color:#ffa500;background-color:#ffa500;border-width:0px;border-style:Groove;font-family:Trebuchet MS;font-size:12pt;font-weight:bold;">
    <td>
                                <input type="submit" name="Menu1:Ad_menu:_ctl1:ad_button" value="الرئيسية" id="Menu1_Ad_menu__ctl1_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" /> 
                                </td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
    <td>
                                    <input type="submit" name="Menu1:Ad_menu:_ctl2:ad_button" value="اخبار" id="Menu1_Ad_menu__ctl2_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
                                </td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
    <td>
                                    <input type="submit" name="Menu1:Ad_menu:_ctl3:ad_button" value="فن" id="Menu1_Ad_menu__ctl3_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
                                </td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
    <td>
                                    <input type="submit" name="Menu1:Ad_menu:_ctl4:ad_button" value="رياضة" id="Menu1_Ad_menu__ctl4_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
                                </td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
    <td>
                                    <input type="submit" name="Menu1:Ad_menu:_ctl5:ad_button" value="أدب" id="Menu1_Ad_menu__ctl5_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
                                </td>
    </tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
    <td>

  </table>
</table>
</table>
</table>
</div>
<div class="article" align="right" style="display: inline-block;" > 
<br>
<div class="27" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
    <img src="paper.gif" alt="article title" align="right" border="2">
    <h2>Article title</h2>
    <p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="28" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
    <img src="paper.gif" alt="article title" align="right" border="2">
    <h2>Article title</h2>
    <p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="29" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
    <img src="paper.gif" alt="article title" align="right" border="2">
    <h2>Article title</h2>
    <p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="30" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
    <img src="paper.gif" alt="article title" align="right" border="2">
    <h2>Article title</h2>
    <p>Short description</p>
 </a>
 </article>
 </div>
<br>
<br>
<br>
<div class="31" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
    <img src="paper.gif" alt="article title" align="right" border="2">
    <h2>Article title</h2>
    <p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="32" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
    <img src="paper.gif" alt="article title" align="right" border="2" >
    <h2>Article title</h2>
    <p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="33" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
    <img src="paper.gif" alt="article title" align="right" border="2">
    <h2>Article title</h2>
    <p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="34" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
    <img src="paper.gif" alt="article title" align="right" border="2">
    <h2>Article title</h2>
    <p>Short description</p>
</a>
</article>
</div>
<div class="button">
<button type="button" name="more" id="load">More</button>

</div>

</body>

</html>

和css：

$(document).ready(function(){
$("div").slice(0, 14).show(); // select the first ten
$("#load").click(function(e){ // click event for load more
    e.preventDefault();
   $("div:hidden").slice(0, 10).show();
      // select next 10 hidden divs and show them
    if($("div:hidden").length == 0){ // check if any hidden divs still exist
       alert("No more divs"); // alert if there are none left

    }
});
})

填充顶：0像素;    填充右：65px; 

 html { 
 background: url(32784_FLS_W01.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

.header h1{
position: absolute;
/*background-color:#C63D0F; */
background-color:transparent;
padding:50px;
padding-left:250px;
padding-right:200px;
margin-left:65px;
margin-right:65px; 
font-size:80px;



 /*  vertical-align: top; */

}
.all {
width: 1370px;
/*height: auto;*/


}

.list {

我真的在css中尝试了很多东西以使它工作但它似乎应该工作jquery或javascript。希望有人能提供帮助。

非常感谢。

2 个答案:

答案 0 :(得分：1)

https://jsfiddle.net/x3azn/3u46oh39/4/

工作样本，我的头顶，你的班级

<div class=<missing quote>button">
<button type="button" name="more" id="load">More</button>

</div>

没有被引用，但除此之外你应该发布实际代码

答案 1 :(得分：0)

我刚试过你的代码并没有错，可能代替这行

$("div:hidden").slice(0, 10).show();

你可以尝试这个

 $("div:hidden").slice(0, 10).css('display','block');

如果这不起作用，你可以尝试粘贴所有的CSS，我可以检查出错了，也许另一个班级正在干扰你的按钮。祝你好运

相关问题
最新问题