我的javascript showhide代码上有奇怪的bug

我成功地完成了“全部显示”功能，但现在，当我单击“全部显示”，然后单击打开的文本或图像时，它会将下面的文本放到屏幕的右侧。

$（函数（）{
$（'.toggle all'）。单击（函数（）{
$（'.printer'）。每个（函数（）{
$（this）.sides（'.gwinfo'）.slideToggle（'slow'）；
});
});
});
.gwinfo{
显示：无；
}
a:链接{
文字装饰：无；
}
a:参观了{
文字装饰：无；
}
a:悬停{
文字装饰：无；
}
.左{
显示：块；
浮动：左；
宽度：10%；
}

---

概述：JSFIDLE中的其余代码，请随意修改我的一些代码，我将非常感激。另外，如果您设法修复了我的代码，请发布一个带有修复代码的JSFIDLE链接。非常感谢你们，伙计们

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

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

猜测标签不匹配。。您能否将HTML更改为以下格式：
印钞机
级别要求：1

价格：$1000

制作：



现有的标签类似于
标签不匹配的地方：
钱仓
级别要求：85

价格：$10000

制作：



但不确定这是否能解决您的问题。。但是你可以试一试。。
另外，请确保使用以下样式抑制项目符号列表项：
格瓦希德先生{
列表样式：无；
}

这解决了问题。多谢各位！这使代码更加清晰，但并没有解决我的问题。也谢谢你！

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

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