简体   繁体   English

jQuery Toggle类选择所有文本

[英]JQuery Toggle class selects all text

I currently have a small tab on the side of the screen that when clicked toggleClass is called to make the div larger. 我目前在屏幕的侧面有一个小选项卡,单击它时会调用toggleClass来使div变大。 At the same time there is an ajax call to populate the larger div with content. 同时,有一个ajax调用来用内容填充较大的div。 What happens though is that all of the text within the div gets selected/highlighted as if I were to drag my mouse across the whole thing. 但是,发生的是div中的所有文本都被选中/突出显示了,就像我要在整个事情上拖动鼠标一样。

Is there a way to have it not be selected, or at least de-select it after it has loaded? 有没有办法让它不被选中,或者至少在它加载后取消选中它?

Here is the code: 这是代码:

   $(".summary-box-small").click(function () {

        $("#summary-box-container").toggleClass('summary-box-small summary-box-full', 1000);
        $.ajax({
            url: '/RuntimeSession/LoadSummaryBox',
            type: 'post',
            success: function (data) {
                $("#summary-box-container").empty().append(data);

                $("#sb-content").tabs();
                $("#tree").dynatree({
                    onActivate: function (node) {
                        alert("You activated " + node);
                    }
                });
            }
        });

        $(".summary-box-small").off('click');   //turns off the click handler so when it is expanding clicking anywhere will not make it minimized
    })

And here is the css: 这是CSS:

.summary-box-small
{
    position: fixed;
    top: 400px;
    left: 0px;
    z-index: 9999;
    height: 70px;
    width: 20px;
    background-color: #cfcfcf;
}

.summary-box-full
{
    position: fixed;
    top: 400px;
    left: 0px;
    z-index: 9999;
    height: 500px;
    width: 350px;
    background-color: #cfcfcf;
    opacity: 0.9;
}

Here is the content being loaded by the AJAX call: 这是通过AJAX调用加载的内容:

    <div id="sb-header">
    <p style="float: right">X</p>
</div>
<div id="sb-content">
    <ul>
        <li><a href="#sb-nav">Nav</a></li>
        <li><a href="#sb-dx">Dx Tracker</a></li>
    </ul>

    <div id="sb-nav">

        <p>fake content under the nav...MAKE ME A GORRAM TREE</p>
         <div id="tree">
        <ul>
            <li id="key1" title="Look, a tool tip!">item1 with key and tooltip</li>
            <li id="key2" class="selected">item2: selected on init</li>
            <li id="key3" class="folder">Folder with some children</li>
            <li id="key4" class="expanded">Document with some children (expanded on init)</li>
            <li id="key5" class="lazy folder">Lazy folder</li>
        </ul>
    </div>
    </div>
    <div id="sb-dx">
        <p>fake content</p>
    </div>
</div>

$(".summary-box-small").click()事件之外添加以下内容是否有作用?

$("#summary-box-container").disableSelection();

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM