jQuery переключает нижний div для отображения слева, а не справа

Question

jQuery переключает нижний div для отображения слева, а не справа

0

Я знаю, что это должно быть легким решением, но я потратил большую часть утра, пытаясь найти решение (до публикации здесь) безрезультатно.

У меня очень простой скрипт jQuery "slideToggle", который при щелчке переместит div в нижнюю часть кнопки на высоту, которую я хочу отобразить. Он соответствует ширине, которую я хочу (400 пикселей), начиная слева от верхнего размера div (130 пикселей) и растягивая вправо. проблема в том, что мне нужно, чтобы она растянулась влево (верхняя "кнопка" установлена в крайнем правом углу страницы, и она отходит от страницы). Вот код, который у меня есть:

  <script src="/jquery-1.9.1.min.js"></script>
    <script src="/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>

Здесь ссылка на jfiddle: введите ссылку здесь.

user3018152 19 март 2014, в 19:14

Источник

Теги:

javascript

jquery

css

2 ответа

Ещё вопросы

apohl · Answer 1 · 2014-03-19T16-41-00.000Z

Попробуйте добавить right: 0; на #DropMenu

James · Answer 2 · 2014-03-19T16-30-00.000Z

Добавить right:0; на #DropMenu. Это приведет к тому, что выпадающее меню начнется с правого конца тега Display cart p.

Большое вам спасибо - это сработало отлично !!! Как вы можете сказать, я все еще учусь, и это мой первый пост здесь - мне потребовалось 5 минут, чтобы получить код, который правильно отобразился в моем сообщении, и добавить ссылку jFiddle!
@ user3018152 удачи в обучении. Переполнение стека - лучшее место для изучения и устранения проблем :)