3

質問のタイトルがわかりにくかったらお詫びしたいので、ここで例を挙げて説明します。

メニューを作成しようとしているこのウェブサイトhttp://color.ninski.roがあります。

このメニューには次の 2 つが必要です。

  1. 要素をクリックすると、その位置が最初の要素の位置に切り替わります (この問題は、この Web サイトのユーザーである Khawer Zeshan のおかげで解決されました)。
  2. 要素が最初になった後、残りの要素をプッシュせずに幅と高さを増やす必要があるため、「隠しテキスト」を表示できますが、別の要素をクリックすると、最初の要素と位置が切り替わり、元の CSS に戻ります。

これはメニューリストです：

    <ul class="unstyled" id="java">
      <li id="b1"><div><a href="">Picturi Interior</a></div></li>
      <li id="b2"><div><a href="">Modele Propuse</a></div></li>
      <li id="b3"><div><a href="">Design Interior</a></div></li>
      <li id="b4"><div><a href="">Web Design</a></div></li>
      <li id="b5"><div><a href="">Obiecte Decorative</a></div></li>
   </ul>

これは、役立つ場合の切り替えスクリプトです。

$.fn.exchangePositionWith = function(selector) {
    var other = $(selector);
    this.after(other.clone());
    other.after(this).remove();
};
$(document.body).on('click', 'ul#java li' ,function(){
    var pos = $(this).closest('li').index();
    $("ul#java li:eq("+pos+")").exchangePositionWith("ul#java li:eq(0)");
});

リストの元の CSS は次のとおりです。

#java li{
 display:inline-block;
 width:149px;
 height:67px;
 margin-left:13px;
 padding-top:40px;
 text-align:center;
}

私の質問や説明が不十分だと思われる場合は、お気軽にお問い合わせください。

4

2 に答える 2

0

あなたは試すことができます：

var iniHTML = '<ul class="unstyled" id="java">';
iniHTML += '<li id="b1"><div><a href="">Picturi Interior</a></div></li>';
iniHTML += '<li id="b2"><div><a href="">Modele Propuse</a></div></li>';
iniHTML += '<li id="b3"><div><a href="">Design Interior</a></div></li>';
iniHTML += '<li id="b4"><div><a href="">Web Design</a></div></li>';
iniHTML += '<li id="b5"><div><a href="">Obiecte Decorative</a></div></li>';
iniHTML += '</ul>';

jQuery のネイティブを使用します$('wherever').html(iniHTML);。つまり、次のように、あなたの初期状態を<ul>保存し、jQuery.css()オブジェクトを別の変数に保存します。

var iniCSS = {
  width: '300px',
  height: '25px',
  color: '#000',
}
$('wherever').css(iniCSS);
于 2013-06-23T23:11:32.133 に答える
0

以下をテストしたときに、div と a-tags を削除しました。なぜ彼らがそこにいるのかわからない。特に、リンクでない場合は a-tags を使用しません。必要な場合は、リンクのように見えるように li のスタイルを設定します。

とにかく、font-size や weight を大きくしても、他の要素はプッシュされません。これらを '' に設定すると元の値に戻るため、以前の値を保存する必要もありません。

$.fn.exchangePositionWith = function(selector) {
    var other = $(selector);
    $(other).css('fontSize','');
    this.after(other.clone());
    other.after(this).remove();
    $(this).css('fontSize','large');
};

最初の項目をクリックすると、フォント サイズが変更されるため、問題が発生するようになりました。これは、クリックされたアイテムのインデックスをチェックすることで、コードで説明できます。

コンテナー要素の高さと幅を具体的に増やしたい場合は、配置を使用して通常のフローから外し、オーバーラップできるようにするか、DIV を保持してマージンやパディングを同様に変更する必要があります。上記のコードへの道（おそらくparent（）を使用）。(境界線または背景を追加するつもりだと思います。そうでない場合、高さ/幅の増加は必要ありません。)

以下は、最初のアイテムのクリックを無視します。このクリックで項目を元の位置に戻すには、変更する必要があります。

$('body').on('click', 'ul#java li' ,function (){
    var pos = $(this).closest('li').index();
    if (pos > 0) {
        $("ul#java li:eq("+pos+")").exchangePositionWith("ul#java li:eq(0)");
    }
});
于 2013-06-23T23:23:10.300 に答える