8

したがって、CSS を使用してホバー効果を追加したこのリストがあります。HTML:

<li><a href="#">Current Period</a>
  <ul>
        <li><a href="#">2012</a>
        <li> a href="#">2011</a> //...you get the point

CSS:

#nav a:hover {
    background-color: #fff;
    color: #333;
}

ユーザーが現在の期間にカーソルを合わせると、子要素のリストが表示されます (2012 年、2011 年など、独自の子要素があります)。私の問題は、ユーザーが「現在の期間」をクリックできることです。次のようにクラスをアンカーに追加することで、クリックを削除できました。

<li><a href="#" class="noclick">Current Period</a> ....

CSS:

.noclick { pointer-events: none; cursor: default; }

もちろん、これによりホバー機能が削除されます。ボタンをクリックできないようにしながら、ホバー効果を維持したい（JavaScriptを考えていましたが、より「直接的な」ソリューションが必要です）。助けていただければ幸いです:)

4

5 に答える 5

3

クリックハンドラーで、クリックされたアイテムにそのクラスがあるかどうかをテストします。

$("#nav a").click(function(e){
     if ($(e.target).hasClass("noclick"))
         return false;

     // your other code here
});

targetイベントの要素をテストすることで、子要素のクリックが機能しなくなることはないことに注意してください。

または、「noclick」クラスが動的に変更されない場合、つまり、これらの「noclick」リンクが「noclick」として始まり、常に「noclick」になる場合は、クリックハンドラーがこれらの特定の要素にバインドされないようにセレクターを変更できます。

$("#nav a").not(".noclick").click(function() { ...
于 2012-09-14T00:23:43.537 に答える
2

やってみました？

$('.noclick').unbind('click');

また

$('.noclick').click(function(e){e.preventDefault();});

また

<a href="javascript:void(0);">Text</a>
于 2012-09-13T23:00:14.777 に答える
1

次の行を変更するだけです：

<li><a href="#" class="noclick">Current Period</a> ....

これのために

<li><a href="#" class="noclick" onclick="return false;">Current Period</a> ....

次のCSSを変更します。

.noclick { pointer-events: none; cursor: default; }

これのために

.noclick { cursor: default; }

それはあなたが望むことをするはずです。

于 2012-09-13T23:04:43.493 に答える
0

.noclickクラスでポインタイベントを削除します

.noclick { cursor: default; }

jsを.noclick要素に追加します

$('.noclick').each(function() {
    var $this = $(this);
    $this.hover(function() {
        // do something...
    });
    $this.click(function() {
        return false;
    });
});
于 2012-09-14T00:12:28.020 に答える
0

noClick クラスを使用して、デフォルトのイベントを防ぐことができます

('.noclick').on('click' , function(e) {
     e.preventDefault();
});
于 2012-09-13T23:03:43.073 に答える