jQuery切换底部div以显示在左侧而不是右侧

Question

I know this must be an easy fix but I've spent the better part of the morning trying to find a solution (before posting here) to no avail. 我知道这一定是一个简单的解决方法，但是我花了大部分时间试图找到解决方法（在此之前发布）无济于事。

I have a very simple jQuery "slideToggle" script that, when clicked, slides a div to the bottom of the button to the height I want it to display. 我有一个非常简单的jQuery“ slideToggle”脚本，当单击该脚本时，会将div滑动到按钮底部到我想要显示的高度。 It fits to the width I want(400px), starting at the left of the top div size(130px) and stretching to the right. 它适合我想要的宽度（400像素），从顶部div尺寸的左侧（130像素）开始，向右延伸。 problem is, I need it to stretch to the left (The top "button" is set to the far right of the page and it stretches off the page). 问题是，我需要它向左伸展（顶部的“按钮”设置在页面的最右边，并且伸展到页面的外面）。 Here's the code I have: 这是我的代码：

  <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
   <style type="text/css">  
    #cartBox {
        width: 110px;
        height: 90px;
        position: absolute;
        margin-left: 90%;
        top: 28px;
        border: 3px solid #800000;
        background-color: #800000;
        border-radius: 12px;
        z-index: 999;
    }
    #cartDropMenu {
        position:absolute;
        z-index:999;
        width: 130px; /* width of  top items (img + text (Cart Items)   */
        float:right;
        top: 0px;
        right: 0px;
        color: white;
        font-family: Arial, Helvetica, Sans serif;
        font-size: 12px;
        text-align: left;
    }
    #cartDropMenu p {
        margin:0;
        padding-left:24px; /* moves text to the left of img */
        cursor:pointer;
        background-image:url('../img/open.png');
        background-position:left; /* positions image to the left or right 300px(cartDropMenu width parameter)   */
        background-repeat:no-repeat;
        text-align: left;    
    }
    #cartDropMenu p.close {
        background-image:url('../img/close.png');
    }
    #DropMenu {
        position:absolute;
        z-index:999;
        background-color:#fff;
        border:solid 1px rgb(220,220,220);
        padding:12px;
        width:400px; /* width of drop down box  */
        box-shadow:1px 1px 4px rgb(220,220,220);
        top:90px; /* position of start point for drop down box  */
        left:8000; /* ???   */
        display:none;
        color: black;
        font-family: Arial, Helvetica, Sans serif;
        font-size: 12px;
    }
   </style>
    <script>
     $(document).ready(function() {
       $('#cartDropMenu p').click(function() {
                $('#DropMenu').slideToggle(300);
                $(this).toggleClass('close');
            });
        }); // end ready
    </script>
</head>
<body>
          <div id="cartBox">        
              <div id="cartDropMenu">
                    <p> &nbsp&nbsp&nbsp&nbsp Display Cart</p>
                    <div id="DropMenu">
                       Test line #1<br />
                       Test line #1<br />
                       Test line #1<br />
                       Test line #1<br />
                       Test line #1<br />
                       Test line #1<br />
                       Test line #1<br />
                       Test line #1<br />
                    </div>     
            </div>
        </div>
    </body>
</html>

Here's the link to jfiddle: enter link description here 这是jfiddle的链接：在此处输入链接描述

Answer 1

Try adding right: 0; 尝试添加right: 0; to #DropMenu 到#DropMenu

Answer 2

Add right:0; right:0;添加right:0; to #DropMenu . 到#DropMenu 。 This will make the dropdown to start from the right end of the Display cart p tag. 这将使下拉列表从Display cart p标签的右端开始。

jQuery切换底部div以显示在左侧而不是右侧

问题描述

2 个解决方案

解决方案1
0 2014-03-19 18:16:56

解决方案2
0 2014-03-19 18:17:33

jQuery切换底部div以显示在左侧而不是右侧

问题描述

2 个解决方案

解决方案1 0 2014-03-19 18:16:56

解决方案2 0 2014-03-19 18:17:33

解决方案1
0 2014-03-19 18:16:56

解决方案2
0 2014-03-19 18:17:33