使用draggable和droppable - jQuery隐藏/显示无法正常工作

时间:2012-03-06 06:01:23

标签: jquery html hover jquery-ui-draggable jquery-ui-droppable

我的问题是:当我将可拖动内容拖到可放置区域时,包含班级<li>的相应subtopic-drop-playlist应该会打开并且它正在发生,<ul class="topic-list">变为display:block它显示了以下内容。

当我在<ul class="topic-list">移动包含班级<li>的第二个subtopic-drop-playlist内的拖动内容时,我的问题是什么?

它不应该打开..

当我将光标悬停在特定<li>上时,应打开包含类subtopic-drop-playlist的第二个<li>

否则它不应该。我已经给出了下面使用的代码......

任何帮助都会感恩和感激......

可放置区域

<ul class="play-lists">
    <li class="subtopic-drop-playlist ui-droppable" id="nid_471">
        <h4 class="title-exp-coll title-collapse"><span class="exp-coll-playlist"></span><a href="/playlist/test">test</a></h4>
        <ul class="topic-list" style="display: none; ">
            <li class="subtopic-drop ui-droppable" topic_id="412326" nid="471"><h5>Topic 1</h5>
                <ul class="asset-list">
                    <li>
                        <div> <a href="/asset/sarav-asset-afternoon2">Sub Topic 1</a></div>
                    </li>
                    <li>
                        <div> <a href="/asset/sarav-asset-afternoon">Sub Topic 2</a></div>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="first"></li>
    <li class="subtopic-drop-playlist ui-droppable" id="nid_469">
        <h4 class="title-exp-coll title-collapse"><span class="exp-coll-playlist"></span><a href="/playlist/sarava">Sarava</a></h4>
        <ul class="topic-list" style="display: none; ">
            <li class="subtopic-drop ui-droppable" topic_id="412324" nid="469"><h5>Topic 1</h5>
                <ul class="asset-list">
                    <li>
                        <div> <a>Sub Topic 1</a></div>
                    </li>
                    <li>
                        <div> <a>Sub Topic 2</a></div>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

可拖动的内容:

<div id="asset-block-content">
    <div class="clearfix comm-list-title">
        <h3>
            <div class="asset-links asset-image asset-draggable ui-draggable" content_asset="450" content_type="asset" class_type="asset-html" content_title="fdasfdasfsa"><a title="Click to view content" href="/asset/fdasfdasfsa">fdasfdasfsa</a>
            </div>
        </h3>
    </div>
</div>

将内容拖动到Droppable区域时显示/隐藏:

function openclosePlaylist() {
    $(this).parent().next().toggle();
    if ($(this).parent().hasClass('active')) {
        $(this).parent().removeClass("title-expand active").addClass("title-collapse");
    }
    else {
        $(this).parent().addClass('active');
        $(this).parent().removeClass("title-collapse").addClass("title-expand active");
    }
}

0 个答案:

没有答案