开发者

Toggle working outside of table not inside

开发者 https://www.devze.com 2023-02-03 09:55 出处:网络
I have a toggle visibility div and outside of the table it works, but inside it doesn\'t.Any help? <!DOCTYPE html>

I have a toggle visibility div and outside of the table it works, but inside it doesn't. Any help?

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<style type="text/css">
#hidden{
    background-color:gray;
    width:120px;
    text-decoration:none;
    font-size:x-large;
    top:120px;
    color:black;
    display:none;
    border:thin;
    border-bottom-color:gray;
}

.style1 {
    border-style: solid;
    border-width: 1px;
}
.style2 {
    border-width: 1px;
}

</style>
</head>

<body>

  <p id="button"><a href="#">Toggle</a></p>

<div id="hidden">woot</div>
<script>

$("#button").hover(function () {
$("#hidden").toggle();
});
</script>

<table style="width: 35%" cellspacing="1" class="style1">
    <tr>
        <td class="style2" style="width: 164px"><p id="button"><a href="#">Toggle</a></p>
</td>
        <td class="style2"><div id="hidden">woot</div></td>
    </tr>
    <tr>
        <td class="style2" style="width: 164px">&nbsp;</td>
        <td class="style2">&nbsp;</td>
    </tr>
</table开发者_如何转开发>

</body>
</html>


You can't have the same ID used twice in a page, it'll fail in some way...usually only attaching to the first instance (like you're seeing).

Instead, use a class if for multiple elements, like this:

<p class="button"><a href="#">Toggle</a></p>

And change your selector from $("#button") to $(".button")

0

精彩评论

暂无评论...
验证码 换一张
取 消