1

「コンテンツ」という名前のdivを取得しました。「コンテンツ」のすべての子 div はサイズ変更可能で、ホバーすると次のように境界線が表示されます。

$('#content div').resizable({});
$('#content div').mouseleave(function(){
$(this).removeClass('borderClass');
});
$('#content div').mouseenter(function(){
$(this).addClass('borderClass');
});

問題は、サイズ変更可能な要素の側面に境界線が表示されることです。例: http://jsfiddle.net/hyEhh/6/

「コンテンツ」のすべての子に、divのサイズを大きくしたときにサイドラインに表示される境界線を除いて、境界線を与えるにはどうすればよいですか??

編集 * javascript/jQuery を使用して境界線を動的に追加できる必要があります。このフィドルは単なる例です。「コンテンツ」に含まれるdivの数に関係なく、ホバー時に境界線を追加できるようにしたい

なぜうまくいかなかったのか理解できない私が試したことの1つはこれです：

if(document.body.style.cursor = "n-resize") {
        $(this).removeClass('borderClass');
    }
4

3 に答える 3

1

resizble が別の div を動的に追加するため (要素を調べます)、基本的にサイズ変更可能な div が境界線を作成します。セレクターは 内のすべての div 用#contentです。これを行う1つの方法は、ホバーする必要があるすべての要素を個別に呼び出すことです...または、セレクターでサイズ変更可能によって作成されたすべてのdivを残す....

これを試して

    $('#content div').resizable({});

$('div#test,div#test2').hover(function(){
     $(this).addClass('borderClass');
    },function(){

         $(this).removeClass('borderClass');
    });

2 つの別々のイベント ハンドラの代わりに使用しhover()ます... hover はmouseenterandの省略形ですmouseleave

更新しました

 $('#content div:not(".ui-resizable-handle")').hover(function(){
        $(this).addClass('borderClass');
    },function(){

        $(this).removeClass('borderClass');
    });

これは、動的に作成されたサイズ変更された div を選択しない場合です。HTML に何も追加する必要はなく、jquerynotメソッドを使用するだけです...

ここでフィドル
更新されたフィドル

于 2013-03-28T16:53:58.293 に答える
0

境界線が必要な各要素に共通のクラス名を追加します。

<div id=content>
    <div id=test>BLABLA
        <div class="child" id="test2">lala</div>
    </div>
</div>

次に、jQuery で使用している CSS セレクターを一致させます。

$('#content div').resizable({});
$('#content div.child').mouseleave(function(){
    $(this).removeClass('borderClass');
});
$('#content div.child').mouseenter(function(){
    $(this).addClass('borderClass');
});
于 2013-03-28T16:49:39.037 に答える
0

これを行うにはいくつかの方法があります。最初の方法は、クラスを子供に割り当てて、次のように呼び出すことです。

<div id=content>
    <div id=test>BLABLA
        <div class="className" id="test2">lala</div>
    </div>
</div>

$('#content div').resizable({});
$('#content div').mouseleave(function(){
    $('.className').removeClass('borderClass');
});
$('#content div').mouseenter(function(){
    $('.className').addClass('borderClass');
});

2 つ目は、親 div の子である要素を検索することです。

$('#content div').resizable({});
$('#content div').mouseleave(function(){
    $(this).children().removeClass('borderClass');
});
$('#content div').mouseenter(function(){
    $(this).children().addClass('borderClass');
});

ホバリングしているサイズ変更可能な単一の要素だけに境界線を追加する場合は、非常に簡単です。前述のように要素にクラスを割り当て、このクラスを使用して要素を選択し、クリック イベントをそれにバインドできます。

<div id=content>
    <div id=test>BLABLA
        <div class="className">lala</div>
        <div class="className">lala</div>
        <div class="className">lala</div>
        <div class="className">lala</div>
    </div>
</div>

$('.className').hover(function(){
    $(this).toggleClass('borderClass');
});

ここで toggleclass メソッドを使用したことに注意してください。これは、別の行でクラスを追加および削除した場合と同じ結果が得られるためです。

上下の境界線のみを実現するには、css クラスは次のようになります。

.borderClass
{
border-top:2px solid #000000;
border-right:none;
border-bottom:2px solid #000000;
border-left:none;
}
于 2013-03-28T16:49:59.713 に答える