Как сделать содержимое выпадающего меню частью родительского элемента?

Question

Что я хочу сделать: у меня есть раскрывающееся меню внутри .slideDown () - div, которое изначально запускается при наведении курсора. Проблема: когда пользователь вводит содержимое раскрывающегося меню, div скользит вверх.

Пока я понял, что элемент меню остается (зависает), когда пользователь вводит содержимое раскрывающегося меню.

Я сделал эту скрипку, чтобы проиллюстрировать суть моей проблемы.

http://jsfiddle.net/nx70oavr/

Вот код:

<div id="container">
<form role="form">
  <div class="form-group">          
    <select class="form-control">
      <option>a</option>
      <option>b</option>
    </select>
  </div>
</form>
</div>

<div id="info">no action done</div>

$("#container").hover(function() {
    $("#info").text("element entered"); 
}, function() {
    $("#info").text("element left");
});

Как сделать содержимое выпадающего меню частью его родительского элемента? Или предотвратить запуск наведения / наведения курсора мыши?

jquery html drop-down-menu

1

Stefan 14 Мар 2015 в 11:28

Answer 1

Итак, я получил немного jQuery и немного CSS. Это будет только справочная информация для вас. Вы, конечно, можете использовать его и изменять по своему усмотрению. Одним из преимуществ здесь является то, что вы контролируете все, и вы можете изменять цвета и все, как вам нравится, в соответствии с вашей темой. Когда у вас есть логика, довольно легко добавить еще больше самостоятельно созданных раскрывающихся списков.

Итак, начнем:

HTML:

<div class="selectedItem">
    Selected Item: None
</div>
<div class="dropdown">
    <span class="dropdownText">Select</span>
    <div class="dropdownGroup">
        <div class="dropdownGroupItem"> Item 1 </div>
        <div class="dropdownGroupItem"> Item 2 </div>
        <div class="dropdownGroupItem"> Item 3 </div>
        <div class="dropdownGroupItem"> Item 4 </div>
    </div>
</div>

CSS:

.dropdown {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 95px; /*Padding makes this 100px in total.*/
    height: 27px;
    line-height: 27px;
    background: #DDDDDD;
    border: 1px solid black;
    border-radius: 3px;
    padding-left: 5px;
    cursor: pointer;
}

.dropdownGroup {
    position: absolute;
    top: 100%;
    left: -1px; /*Account for the border and move 1 to the left (2px / 2 = 1px)*/
    width: 100%;
    background: #909090;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-radius: 0px 0px 3px 3px;
    overflow: hidden;
    visibility: hidden;
}

.dropdownGroupItem {
    position: relative;
    background: transparent;
}

.dropdownGroupItem:hover {
    background: gray; 
}

JQuery (Javascript):

var selectedItemText; //Use something like this to save your selected values for later use.
$(".dropdown").click(function() {
    var visibility = $(".dropdownGroup").css("visibility");
    if (visibility == "hidden") {
        $(".dropdownGroup").css("visibility", "visible");
    }       
});

$(".dropdownGroupItem").click(function(e) {
    e.stopPropagation(); //Prevent $(".dropdown").click() from being executed.
    selectedItemText = $(this).text();
    $(".selectedItem").text("Selected Item: " + selectedItemText);
    $(".dropdownText").text(selectedItemText);
    $(".dropdownGroup").css("visibility", "hidden");
});

Надеюсь, это поможет :).

0

Fred 14 Мар 2015 в 09:40

Answer 2

Может быть, ты хочешь этого. Если я вас правильно понял.

$("#container select").hover(function() {
    $("#info").text("element entered"); 
}, function() {
    $("#info").text("element left");
});

Демо

0

Sadikhasan 14 Мар 2015 в 08:59

Как сделать содержимое выпадающего меню частью родительского элемента?

2 ответа

Похожие вопросы

Новые вопросы

jquery