0

我有一系列 p 标签，我想在 jQuery 中切换。我在 p 标签之外有一个图像。当我编写切换函数并执行它时，动画会切换声明的 p 标签和 p 标签之外的图像。

这是一个小提琴：

http://jsfiddle.net/nF5qU/1/

这是代码：

HTML

<div class="toggle" id="toggleIt"><a>CLICK ME</a></div>
<div class="nav">
    <div class="One">
        <img src="pipeline/img/right.png" class="imgFunc"> 
        <p class="hideMe">Suspendisse cursus dapibus luctus knowing. 
            <br />
        <span>website.com</span></p>
    </div> 
    <!-- -->
<div class="nav">
    <div class="One">
        <img src="pipeline/img/right.png" class="directionalImg"> 
        <p class="hideMe">Suspendisse cursus dapibus luctus knowing. 
            <br />
        <span>website.com</span></p>
    </div>

CSS

.directionalImg{
position: absolute;
padding-right: 10px;
margin-left: 10px;
}
.One{
margin-top: 125px;
}
.One p{
font-size: 9pt;
margin-left: 22px;
}
.One p span{
font-style: italic;
color: #999;
padding-right: 10px;
}
.toggleIt{
margin-top: 98px;
position: absolute;
font-size: 20pt;
}

​</p>

jQuery

$("#toggleIt").click(function() {
$(".hideMe").toggle(500);
$("#toggleIt").animate({
    "left": "400px"
}, 0);
$(".nav").animate({
    "left": "400px"
}, 0);
});​

关于可能导致这种情况的任何想法？是因为我的形象是“绝对的”吗？我尝试将函数编写为 p.hideMe 而不是 .hideMe 并且没有任何反应。任何帮助是极大的赞赏。

编辑：对不起，我写得很快，忘记关闭标签并放置一个“。” 在hideMe面前。我没有复制和粘贴，所以我向你保证所有标签都在实际文档中关闭。

4

3 回答 3

2

缺少引号导致 html 被破坏

<div id="slideFunction> <--

而你的你错过了类选择器的时期

$("#slideFunction").click(function () {
    $(".hideMe").toggle(500); // <-- you were missing the period
});

http://jsfiddle.net/Y6NjX/

于 2012-11-14T15:27:25.817 回答
0

您是否尝试过关闭图像标签？

<img src="images/pic.png" class="imgOne" />

而且你没有正确关闭你的第一个 div 标签

<div id="slideFunction">

小提琴：http: //jsfiddle.net/gS7DB/1/

于 2012-11-14T15:25:16.117 回答
0

除了你的 html 问题，比如在你的 div 类上缺少引号：

<div id="slideFunction">click here to hide paragraph</div> <!-- instead of: <div id="slideFunction>click here to hide paragraph</div> -->

缺少 img 标签中的结束标签，

<img src="images/pic.png" class="imgOne"/>  <!-- instead of <img src="images/pic.png" class="imgOne"> -->

您没有使用这行代码选择任何内容：

$("hideMe").toggle(500);

应该是：

$(".hideMe").toggle(500);
于 2012-11-14T15:26:48.020 回答