Дисплей: None разрушает рендеринг других объектов jquery

Question

Дисплей: None разрушает рендеринг других объектов jquery

0

Таким образом, у меня есть jquery Multiple Select Dropdownbox (флажки внутри раскрывающегося списка)
Я пытался реализовать это, чтобы он выглядел как Меню, которое будет POP-out при наведении на div. так вот мой код

Код ASP:

<div class="box">
        SORT?
        <div class="hiddencolumn"  style="position: absolute; background-color:Black; height:auto;">
            <asp:DropDownList ID="CompanyDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
            </asp:DropDownList>
            <br />
            <asp:DropDownList ID="RegionDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
            </asp:DropDownList>
            <br />
            <asp:DropDownList ID="AreaDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
            </asp:DropDownList>
            <br />
            <asp:DropDownList ID="BranchDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
            </asp:DropDownList>
            <br />
            <asp:DropDownList ID="StorageGroupDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
            </asp:DropDownList>
            <br />
            <asp:DropDownList ID="SORDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
            </asp:DropDownList>
            <br />
            <asp:DropDownList ID="TicketDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
            </asp:DropDownList>
            <br />
            <asp:DropDownList ID="KaratDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
            </asp:DropDownList>
            <br />
            <asp:DropDownList ID="PORIGINDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
            </asp:DropDownList>
            <br />
            <asp:DropDownList ID="StatusDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
            </asp:DropDownList>
            <br />
            <asp:DropDownList ID="ClassificationsDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
            </asp:DropDownList>
            <br />
            <asp:Button ID="SortButton" runat="server" Text="Sort" OnClick="SortButton_Click" />
        </div>
    </div>

JavaScript Для раскрывающегося списка выпадающих списков и hover fadein

  <script language="javascript" type="text/javascript">
        $(document).ready(function()      
        {                 

            $(".s10").dropdownchecklist( { firstItemChecksAll: true,forceMultiple: true, onComplete: function(selector) {
                var values = "";
                for( i=0; i < selector.options.length; i++ ) {
                    if (selector.options[i].selected && (selector.options[i].value != "")) {
                        if ( values != "" ) values += ";";
                        values += selector.options[i].value;
                    }
                }
                alert( values );
            } }); 


            $(function(){
    $(".box").hover(function(){
      $(this).find(".hiddencolumn").fadeIn();
    }
                    ,function(){
                        $(this).find(".hiddencolumn").fadeOut();
                    }
                   );        
});  

   }); 
    </script>

Css

.hiddencolumn
{
      display: none;
}

когда я удаляю класс скрытых столбцов на Div (например, REMove display:none;)
Оказание правильное:
проблема заключается в том, что я добавил класс hiddenColumn или добавленный display:none из div не является тем, что делает

Любая помощь? или работать? любой гид был бы очень оценен.

user2705620 08 нояб. 2013, в 07:59

Источник

1

Используйте visibility: hidden вместо display:none чтобы оставить место, выделенное для элемента в макете.
Anthony 08 нояб. 2013, в 07:00
0

@Anthony Энтони, если я использую visibility: hidden jquery для fadein() не работает, так что в случае этого, даже если я наведу курсор мыши на div, он не будет отображаться так, как я хотел, если вы можете дать альтернативный jquery, пожалуйста, опубликовать его как ответ спасибо :)
Albert Laure 08 нояб. 2013, в 07:09

Теги:

javascript

jquery

html

css

asp.net

2 ответа

0

используйте max-height:0, overflow:hidden сначала max-height:0, overflow:hidden, а при наведении задано max-height:auto.

Ravi Hamsa 08 нояб. 2013, в 04:55

Ещё вопросы

Используйте visibility: hidden вместо display:none чтобы оставить место, выделенное для элемента в макете.
@Anthony Энтони, если я использую visibility: hidden jquery для fadein() не работает, так что в случае этого, даже если я наведу курсор мыши на div, он не будет отображаться так, как я хотел, если вы можете дать альтернативный jquery, пожалуйста, опубликовать его как ответ спасибо :)

Anthony · Accepted Answer · 2013-11-08T06-20-00.000Z

Основываясь на аналогичном вопросе, вы можете воспроизвести свой fadeOut и fadeIn с помощью:

// FadeOut with visibility : hidden
$(this).find(".hiddencolumn").fadeOut("slow", function() {
    $(this).show().css({visibility: "hidden"});
});

// FadeIn with visibility : visible
$(this).find(".hiddencolumn").hide().css({visibility: "visible"}).fadeIn("slow");

Проблема заключается в том, что display: none фактически удаляет элемент из макета, поэтому он больше не имеет высоты или ширины, которые влияют на другие элементы, а просто изменяя opacity элемента, например, с .animate({opacity:1}) делает элемент 100 % opaque, но элемент по-прежнему реагирует на события, такие как щелчки мыши. visibility: hidden - единственное правило CSS, которое отображает контур элемента в макете, но не представляет его пользователю.

Этот ответ очень хорошо подходит, я просто использовал $(this).find(".hiddencolumn").hide().css({visibility: "visible"}).fadeIn("slow"); и для скрывающей function(){ $(this).find(".overlay").fadeOut(); } );