0

わかりました、私はこのコードを持っています：

<html>
<head>
<script src="js/jquery.js"></script>
<script type="text/javascript">
function ps()
{
$('#mm').slideDown("slow");
}
$(document).ready(function(){
$('#mm').hide();
document.onclick = $('#mm').hide(); //this is not working, this one should make the '#mm' hide.
});
</script>
<body>
<button onclick="ps()" id="title" class="bb">Page settings
<ul id="mm">
<li><a href="#">Title</a></li>
<li><a href="#">meta tags</a></li>
<li><a href="#">favicon</a></li>
<li><a href="#">header settings</a></li>
</ul>
</button>
</body>
</html>

今、私が欲しいのは、ユーザーがボタン（'#title'）をクリックするたびに、このul（'＃mm'）が表示され、もちろん、ユーザーが方法をクリックするか、そのulにカーソルを合わせると、そのulは次のようになります。隠れた。誰かが助けてくれることを願っています、事前に感謝します。私はどんな提案でも開いています。これはドロップダウンメニューのようなものです。

4

3 に答える 3

1

あなたの HTML と Javascript は少しおかしくなっています。HTML を検証し、jQuery についてさらに学びたいと思うかもしれません。

おそらく、2 つの単純なイベント ハンドラーが必要なだけです。

$('#title').click(function(){$('#mm').show()});
$('#title').mouseout(function{$('#mm').hide()});

これが実際の例です

HTML

<button id="title">Set Title</button>

<ul id="mm">
    <li>Title One</li>
    <li>Title Two</li>
    <li>Title Three</li>
</ul>

CSS

#mm{
    display:none;
}

jQuery

$('#title').click(function(){
   $('#mm').show();
});

$('#title').mouseout(function(){
  $('#mm').hide();
});
于 2012-04-26T15:51:08.237 に答える
0

ヘッド セクションを閉じることから始めます。ボタン内の他の多くの要素はおそらく適切ではありません。これにはインライン JavaScript ハンドラは必要ありません。たぶん、このようなものがうまくいくでしょう:

<!DOCTYPE html>
    <head>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#mm').hide();
                $("#title").on({
                     click: function() {
                         $('#mm').slideDown("slow");
                     },
                     mouseleave: function() {
                         $('#mm').delay(300).slideUp("slow");    
                     }
                });
            });
        </script>
    </head>
    <body>
        <button id="title" class="bb">Page settings
            <ul id="mm">
                <li><a href="#">Title</a></li>
                <li><a href="#">meta tags</a></li>
                <li><a href="#">favicon</a></li>
                <li><a href="#">header settings</a></li>
            </ul>
        </button>
    </body>
</html>​

フィドル

于 2012-04-26T15:59:54.493 に答える
0

Uはjquery toggle()関数を使用してそれを行うことができます
例http://jsfiddle.net/EnigmaMaster/WgSp4/

  $('#title').click(function() {
    $('#mm').toggle();
});​
于 2012-04-26T16:16:20.233 に答える