0

だから私はjquery Multiple Select Dropdownbox（ドロップダウン内のチェックボックス）を 持っています。提供された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 ボックスのドロップダウン チェックリストとホバー フェードイン

  <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 の非表示の列クラスを削除すると (eg.Remove the display:none;)
レンダリングは次のように正しくなります:
a 問題は、hiddenColumnクラスを追加したとき、またはdisplay:nonediv に追加したときに、これがレンダリングされることです。

b

何か助けはありますか？または回避策はありますか？どんなガイドでも大歓迎です。

4

2 に答える 2

1

同様の質問に基づいて、次のようにfadeOutandfadeInを再生できます。

// 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% 不透明になりますが、要素は引き続きマウスなどのイベントに応答します。クリックします。visibility: hiddenレイアウト内の要素のアウトラインをレンダリングする唯一の CSS ルールですが、それ以外の方法でユーザーに表示することはありません。

于 2013-11-08T07:28:56.097 に答える