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

你的问题不是很清楚，我可以立即推荐的一件事是使用 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 再次向上滑动，它有什么用。

你可以点击这个找到我对应的jsFiddle 。

我希望这能够帮到你。

祝你好运。

于 2013-10-02T18:42:24.357 回答