0

I have a series of p tags that I want to have toggle in jQuery. I have an image slightly outside the p tags. When I write the toggle function and execute it, the animation toggles both the declared p tag and the image that is outside of the p tag.

Here is a fiddle:

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

Here is the code:

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

Any thoughts on what might be causing this? Is it because my image is 'absolute' ? I tried writing the function as p.hideMe instead of just .hideMe and nothing happens. Any help is greatly appreciated.

EDIT: Sorry I was writing this quickly and forgot to close tags and place a '.' in front of hideMe. I wasn't copying and pasting over so I assure you all tags are closed in the actual document.

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

div クラスに引用符がないなどの html の問題に加えて:

<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 に答える