1

jqueryを使用して、ページ上の別のdivでdivの下に小さなドロップダウンを作成する方法を理解するのを手伝ってくれる人はいますか?

これは私がこれまでに持っているものです(jquery/jquery UI)...

http://jsfiddle.net/hqSEJ/29/

基本的に私がしようとしているアイデアですが、ページサイズに合わせてcssを調整する必要があると思うので、これを修正する必要がありますか? ドロップダウンdivが常にユーザータグのようなものの下にあるようにします。

とにかく、私がここで試みていることが正しい/最善のアプローチであるかどうかはわかりませんが、私はそれを学ぼうとしているので、より良い方法を提供してください. ありがとう！

マークアップ:

<div id='top-wrapper'>
            <div id='top-inner-wrapper'>
                <div id='title'>Main Title</div>
            <div id='user-like-item'>User Name Type Thing</div>
        </div>     
    </div>
    <div id='content-wrapper'></div>
    <div id='hidden-drop-down' style='display:none;'></div>

jquery:

 $(document).ready(function () {
        $("#user-like-item").hover( function () {
           $(this).addClass("highlighted-user"); 
            $("#hidden-drop-down").show('slide', { direction: 'up'}, 1000);
        }, function () {
            $(this).removeClass("highlighted-user");
              $("#hidden-drop-down").hide('slide', { direction: 'up'}, 1000);
        });
    });

私が試したスタイル：

*{
padding:0;
margin:0
}
        #top-wrapper{
            position:fixed;
            top:0;
            width:100%;
            background-color:#2d2d2d;
            min-height:50px;
        }

        #top-inner-wrapper{
            width:70%;
            margin:0 auto;
            color:white;
            border-right:1px solid white;
            border-left:1px solid white;
        }

        #title, #user-like-item{
            width:40%;
            float:left;
            font-family:segoe ui;
            font-size:1.3em;
            font-weight:lighter;
            margin:2% 0;
        }

        #user-like-item{
            float:right;
            font-size:.8em;
            margin-top:30px
        }

        .highlighted-user{
         color:#fa3701;
            cursor:pointer;
        }

        #hidden-drop-down{
            min-height:100px;
            background-color:#e0e0e0;
            border:1px solid #2d2d2d;
            position:fixed;
            left:58%;
            width:20%;
            top:55px
        }

編集：不明確な質問をお詫びします。そのため、別の div から div ドロップダウンを作成したいと思います (そのユーザー名のように)。私はこれを学んでいるので、より良い方法がたくさんあるかもしれませんが、フィドルは私がいじったものです。ドロップダウン div の位置が本来あるべき位置にないようです... ページのサイズを変更すると、適切に配置されません。これを修正する方法を考えているだけですか、それとも改善として他に何ができるのでしょうか? それは理にかなっていますか？

4

1 に答える 1

2

あなたの質問はあまり明確ではありません。すぐにお勧めできることの 1 つは、jQuerytoggle関数を使用することです。

$(document).ready(function () {
    $("#user-like-item").hover( function () {
       $(this).addClass("highlighted-user"); 
       $("#hidden-drop-down").toggle('slide', { direction: 'up'}, 1000);
    });
});

そして質問について：どのように配置したいですか。何を達成したいですか？

アップデート

わかりました、私はあなたのためにそれを手に入れました。

レイアウトがさまざまなプロパティで構築されているため、デザインが応答しないため、解決が非常に困難になりました。

将来の欠陥を防ぐことができるいくつかの基本的な教訓をお教えしましょう。

  • 右に浮かぶ場合は、すべてを右に浮かせます（あなたの場合）
  • 左にフロートする場合は、すべて左にフロートします（あなたの場合）
  • 常に各要素に幅と高さを与える
  • 「トレース」する必要があるメニュー項目またはその他の項目に相対的な幅と高さを与えることは良い考えではありません
  • デザインをレスポンシブにしたい場合は、絶対配置を避けてください。それ以外の場合は、これをお読みください。
  • 相対的なマージンを与えることは、物事を非常に複雑にします。むしろ、それぞれのマージンではなく、要素の幅をレスポンシブにします。
  • 位置とマウスの動きを完全に制御できるように、完全なコンテンツの周りにラッパーを配置するのが賢明な場合がよくあります。

HTML

では、私が書いた新しいHTMLを見てみましょう。

<div id='content-wrapper'>
  <div id='top-wrapper'>
      <div class='top-inner-wrapper'>
          <div id='title'>Main Title</div>
          <div id='user-like-item'>User Name Type Thing</div>
      </div>     
  </div>
</div>    

<div class='top-inner-wrapper'>
    <div id='hidden-drop-down' style='display:none;'><br>You can still hover over me</div>
</div>

  • ご覧のとおり、contentと の周りにラッパーを配置しましたtop-wrapper。以下のjQueryでわかるように、マウスの動きを追跡する必要があるため、これを行いました。

  • また、top-inner-wrapper(複雑な!!!) CSS プロパティを にも適用できるようにクラスを作成しhidden-drop-downました。

CSS

body {
   width:100%;
   height:100%;    
}

*{padding:0;margin:0}
#top-wrapper{
    top:0;
    width:100%;
    background-color:#2d2d2d;
    min-height:50px;
}

.top-inner-wrapper{
    // just put the width at 100%. 
    // because a width of 70% is very complex to work with
    width:100%;
    margin:0 auto;
    color:white;
    border-right:1px solid white;
    border-left:1px solid white;
}

#title, #user-like-item{
    width:40%;
    float:left;
    font-family:segoe ui;
    font-size:1.3em;
    font-weight:lighter;
    // I changed from relative margin (10%) to absolute margin
    margin-left:20px;
}

#user-like-item{
    float:right;
    width:200px;
    font-size:.8em;
    margin-top:30px;
    // changed to color so I can track it's width
    background-color:yellow;
    // Relative margin: I don't like it but this is what you had
    margin-right:10%;
}

.highlighted-user{
 color:#fa3701;
    cursor:pointer;
}

#hidden-drop-down{
    // Now these changes are important

    // ABSOLUTE HEIGHT
    height:100px;
    // ABSOLUTE WIDTH
    width:200px;
    background-color:#e0e0e0;
    border:1px solid #2d2d2d;
    top:50px;
    // RELATIVE MARGIN: because you also did this at `#user-like-item`
    right:10%;
    margin-right:-1px;
    position:absolute;

    // float:right !!!
    float:right;
}

#content-wrapper {
    // always let the wrapper be 100%
    width:100%;

    // you can specify height of page here (or do auto if you actually have content)
    height:600px; 
    background-color:lightblue;
}

jQuery

$(document).ready(function () {
    $("#user-like-item").hover( function () {
       $(this).addClass("highlighted-user");

        // if hover over #user-like-item: slide down
        $("#hidden-drop-down").slideDown(function()
        {
            // only slide up if mouse has entered #content-wrapper
            $("#content-wrapper").mouseenter(function()
            {
                 $("#hidden-drop-down").slideUp();                               
            });
            // only slide up if mouse has entered #top-wrapper
            $("#top-wrapper").mouseenter(function()
            {
                 $("#hidden-drop-down").slideUp();                               
            });
        });
    });
});

この新しい jQuery では、非表示のスライド div が以前のようにすぐには消えないことに注意してください。これは、ユーザーが div を読み取ったりクリックしたりできるようにしたいためです。つまり、スライド div が再び右にスライドする場合、スライド div の使用は何ですか。

これをクリックすると、対応する jsFiddle を見つけることができます。

これがお役に立てば幸いです。

幸運を。

于 2013-10-02T18:42:24.357 に答える