0

今日、同僚がこのスクリプトを手伝ってくれました。私のテスト サンプルでは問題なく動作しますが、サイト デザインに組み込んでみるとうまくいきません。オブジェクトは、div(boxEnd) を使用してメニュー バーの端の角を歪ませたり丸めたりし、最後のメニュー項目 (menlast) のホバー状態を適用することです。私のサンプルでは 'a' 要素が 1 つしかありませんでしたが、2 つ目を追加すると、両方の 'a' 要素によってホバー状態が div に適用されました。そのため、スクリプトを利用するように現在のコードを修正し、最後のメニュー項目がホバーされているときにのみスクリプトを呼び出す方法を理解する必要があります。

<script>
$(document).ready(function() {
    $('nav').hover(function() {
        $(this).children('a').children('#boxEnd').css('background-color','#ffffff');
    }, function() {
        $(this).children('a').children('#boxEnd').css('background-color','#ff2d0a');
    });
});
</script>

</head>

<body>

<!-- TOP NAV -->

<div id="NAVcontainer">
<div align="center" id="topnav">
  <div align="left" id="logo"><img src="images/mml-3-24-264x102.png"/></div>
  <div align="left" id="menu">
    <nav> 
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#portfolio">Portfolio</a>
    <a id="menlast" href="#contact">Contact
    <div id="boxEnd">&emsp;</div></a>
    </nav>
  </div>
</div>
</div>
4

2 に答える 2

0

.children('a') の後に .end() を追加するだけ http://api.jquery.com/end/ .end() 説明: 現在のチェーンの最新のフィルタリング操作を終了し、一致した要素のセットをその以前の状態。

本質的に $(this).children('a').end().children('#boxEnd').css('background-color','#ffffff');

フィドルを参照してください http://jsfiddle.net/v3szF/5/

 $('nav').hover(function() {
    $(this).children('a').end().children('#boxEnd').css('background-color','#ffffff');
}, function() {
    $(this).children('a').end().children('#boxEnd').css('background-color','#ff2d0a');
});
于 2013-03-29T01:20:41.933 に答える
0

$().children をデイジー チェーン接続すると、すべての子のすべての子が取得されるわけではありません。最初の子の子のみを取得します。これが実際の HTML である場合は、

$('nav').hover(function() { $('#boxEnd').css(...); });

nav と #boxEnd の関係を考慮する必要はありません。$('#boxEnd') は常に正しい div を見つけます。

これは、投稿したコードが問題を解決するための試みであり、2 番目の 'a' を追加した後の最初のコードではないことを前提としています。それが間違っている場合は、これを編集して詳細を追加します。

于 2013-03-29T01:03:37.670 に答える