Question

我得到了这个节目所有成功完成的事情，但现在当我单击全部显示然后单击打开的文本或图像时，它会将文本放在屏幕的右侧。 JSFiddle Gyazo

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

一般：JSFiddle中的其余代码，随意修复我的一些代码，我会很感激。此外，如果您设法修复我的代码，请发布带有固定代码的JSFiddle链接。谢谢你，伙计们！

Answer 1

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

<div style="clear: both;"></div>

http://jsfiddle.net/z2tSd/5/

Answer 2

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

我的javascript showhide代码上的奇怪错误

2 个答案: