0

私はこの状況を持っています：

<li id="liMessagesPanel" >
    <span id="unreadMessagesCount" class="messagesCount" ></span>
    <a ID="lnkMessages" class="messages">
        <small>Notifications</small>
    </a>
</li>

これにより、以下が生成されます。 ここに画像の説明を入力

a.messages{ background: url(../img/Footer/iconMail.png) no-repeat center center; border-right: 1px solid #bbb;}

.messagesCount {
    background-color: red;
    border: 1px solid white;
    border-radius: 16% 16% 16% 16%;
    color: White;
    font-family: Verdana;
    font-size: 8px;
    font-weight: bold;
    height: 20px;
    margin-left: -20px;
    position: relative;
    width: 198px;
    z-index: 2147483647;
    padding: 0 1px;
}

問題は、スパンがアンカー要素内にないためクリックできず、アンカー要素内に配置すると認識されないことです。

白い郵便封筒がイメージで、封筒イメージの右上の赤いボックスがスパンです。

注: jquery プラグインで使用されているため、構造 li -> a -> small を変更することはできません。

4

4 に答える 4

1

jquery を使用して、スパンでクリック イベントを処理します。その後、スパンがクリックされたときに好きなことをすることができます

 $("#unreadMessagesCount").click(function(){
       //do what ever


 });

css を使用して、スパンの上にマウスを置いたときにカーソルを変更して、ユーザーがクリック可能であることを知ることができます。

于 2013-04-08T19:19:44.107 に答える
1

css を追加して、カーソル ポインターを次のように表示します<span>。

.messagesCount { 
   cursor: pointer;
   ...
   ...

次に、クリック ハンドラーを作成して、<span>クリック ハンドラーをトリガーし<a>ます。

$('.messagesCount').click(function() {
   $(this).next('a').triggerHandler('click');
});
于 2013-04-08T19:24:15.570 に答える
1

スパンをクリック可能にしないのはなぜですか?

$('liMessagesPanel>span').click(function(e) {
    e.preventDefault();
    $(this).next().click();
});

jqueryの使用を前提としています。

于 2013-04-08T19:20:09.623 に答える