JQuery Slidedown перемещает другой div вниз

Question

Я пытаюсь установить div абсолютным с помощью css. У меня есть 2 divs, где я использую jquery slide down и slide up. Если один div скользит вниз, другой div также нарушается с помощью этого кода here.

Не могли бы вы предложить мне aproach, чтобы остановить второй div, когда мышь на первом div и наоборот.

Answer 1

проверить эту ссылку здесь http://jsfiddle.net/sarfarazdesigner/K2ndZ/5/ для этого вы должны изменить код вашего это CSS

.combobox {cursor:pointer;display:inline-block; position:relative;} 
.combobox .selector {position:relative; float:left; } 
.combobox .selector p{border:1px solid #cccccc;padding: 2px 5px;} 
.combobox ul {padding:0;margin:0;display:inline-block;border:1px solid #eeeeee;background-color:#cccccc;} 
.combobox li {padding: 2px 5px} 

это html

<div class="combobox"> 
    <div class="selector"> 
     <p>Please select</p> 
     <ul> 
      <li>Option 1</li> 
      <li>Option 2</li> 
      <li>Option 3</li> 
     </ul> 
    </div> 


    <div class="selector"> 
     <p>Please select</p> 
     <ul> 
      <li>Option 1</li> 
      <li>Option 2</li> 
      <li>Option 3</li> 
     </ul> 
    </div> 
</div> 

и это JQuery часть

$(document).ready(function(){ 
    $('.combobox ul').hide(); 
    $('.combobox p').hover(
     function(){ 
      console.log(this); 
      $(this).next('ul').stop().slideDown(); 
     }, 
     function(){ 
      $(this).next('ul').stop().slideUp(); 
     } 
    ); 
    $('.combobox li').click(function(){ 
     $(this).parents('.combobox').find('.selector').text($(this).text()); 
    }); 
}); 

обновил ссылку в соответствии с Вами

http://jsfiddle.net/sarfarazdesigner/K2ndZ/7/

Answer 2

Пожалуйста, посмотрите на http://jsfiddle.net/K2ndZ/3/

Я сделал изменения только в .combobox {cursor:pointer;float:left; margin-left:10px;}