我的javascript显示代码有个奇怪的bug

Weird bug on my javascript showhide code

本文关键字：bug javascript 显示 代码 我的      更新时间：2023-09-26

我成功地完成了这个显示所有的事情，但是现在当我单击显示所有，然后单击打开的文本或图像时，它会将下面的文本放在屏幕的右侧。JSFiddleGyazo 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(function () {   
    $('.toggle-all').click(function() {
        $('.printer').each(function () {
            $(this).siblings('.gwinfo').slideToggle('slow');
        });
    });
});
</script>
<style>
.gwinfo {
    display: none;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
   .left{
          display: block;
          float:left; 
          width:10%;
    }
</style>

General: JSFiddle中的其余代码，请随意修改我的一些代码，我会非常感激。此外，如果你设法修复我的代码，请张贴一个JSFiddle链接与固定的代码。非常感谢大家!

不使用break标签来清除浮动，而是使用div。我还修复了一些没有正确嵌套的标签。

<div style="clear: both;"></div>
http://jsfiddle.net/z2tSd/5/

Guess the tags are mis-matched.. Can you change your HTML to the one as below:
<div class="gwshowhide">
        <li><a class="printer">Money Printer</a>
            <div class="gwinfo">Level Requirement: 1
                <br>Price: $1000
                <br>Production:
                <br>
                <img src="images/shop/Amber Money Printer.png">
            </div>
        </li>
    </div>
The existing one's are like where <li> tags are mismatching:
<div class="left">
    <div class="gwshowhide">
        <li><a class="printer">Money Silo</a>
            <div class="gwinfo">Level Requirement: 85
                <br>Price: $10,000
                <br>Production:
                <br>
                <img src="images/shop/Diamond Money Silo.png">
            </div>
    </div>
    </li>
</div>
Not sure if this will fix your issue though.. but you can give a try..
Also make sure you are suppressing the bullet list items using the style below:
.gwshowhide {
    list-style:none;
}
相关文章：