JavaScriptが他に変更された場合CSS

これはなぜ動作しないのか誰かが教えてくれるのだろうか？それは一度だけ機能します。私は基礎のスイッチオブジェクトでdivの高さを切り替えようとしています。また、＃をクリックすると完全に切り替わります。しかし、それはアイデアではありませんでした。JavaScriptが他に変更された場合CSS

var open = 0; 
 
$('#newtopicbutton').click(function() { 
 
    if (open === 0) { 
 
    $('#new').css({ 
 
     'height': '440px', 
 
     'color': 'white', 
 
     'font-size': '44px' 
 
    }); 
 
    open = 1; 
 
    } else { 
 
    if (open === 1) { 
 
     $('#new').css({ 
 
     'height': '48px', 
 
     'color': 'white', 
 
     'font-size': '44px' 
 
     }); 
 
     open = 0; 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="new" class="large-3 medium-3 small-3 columns" style="padding-top:10px;background:#2f2f2f;margin-top:20px;height:440px;color:white;font-weight:700;font-size:14px !important;"> 
 
    <div id="newtopicbutton" class="switch small"> 
 
    <input class="switch-input" style="background:red;" id="exampleSwitch" checked="true" type="checkbox" name="exampleSwitch"> 
 
    <label class="switch-paddle" for="exampleSwitch"> 
 
     <span class="show-for-sr float-right">NEW TOPICS</span> 
 
    </label> 
 
    </div> 
 
</div>

それは一度だけのために働きます。

出典

2016-07-19 Sezer Toker

['.toggleClass（）']（http://api.jquery.com/toggleclass/）を使ってCSSをスタイルシートクラスに移動することで、これを簡単にすることができます。 – Blazemonger

@Blazemongerと同意しますが、そうでない場合はこのスレッドをチェックしてください：http://stackoverflow.com/questions/9180087/how-to-handle-change-of-checkbox-using-jquery – Toby

あなたは唯一のCSS属性クリックごとに変化しているのは「高さ」ですか？それはうまく動作します。 – Blazemonger

あなただけのdiv

var open = 0; 
 
$('#exampleSwitch').click(function() { 
 
if (open===0) { 
 
    $('#new').css({ 
 
     'height': '440px', 
 
     'color': 'white', 
 
     'font-size': '44px' 
 
    }); 
 
\t open=1;} 
 
else{ 
 
\t if (open===1) { 
 
    $('#new').css({ 
 
     'height': '48px', 
 
     'color': 'white', 
 
     'font-size': '44px' 
 
    }); 
 
\t open=0;} 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="new" class="large-3 medium-3 small-3 columns" style="padding-top:10px;background:#2f2f2f;margin-top:20px;height:440px;color:white;font-weight:700;font-size:14px !important;"> 
 
    <div id="newtopicbutton" class="switch small"> 
 
    <input class="switch-input" style="background:red;" id="exampleSwitch" checked="true" type="checkbox" name="exampleSwitch"> 
 
    <label class="switch-paddle" for="exampleSwitch"> 
 
     <span class="show-for-sr float-right">NEW TOPICS</span> 
 
    </label> 
 
    </div> 
 
</div>

けどとして周囲の代わりの入力ボタンにクリックイベントをリッスンする必要がありますコメントで述べたように.toggleClassでこれを行う方が良いです

出典

2016-07-19 15:40:52

これは完璧に動作します。（ –

注：目的は 'input'要素が変更されたかどうかをチェックすることなので、正しいイベントは' change'です。@SezerToker –

-1

私はあなたのコードビットを改訂：

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

<body> 
<div id="new" class="large-3 medium-3 small-3 columns" style="padding-top:10px;background:#2f2f2f;margin-top:20px;height:440px;color:white;font-weight:700;font-size:14px !important;"> 
    <div id="newtopicbutton" class="switch small"> 
    <input class="switch-input" style="background:red;" id="exampleSwitch" checked="true" type="checkbox" name="exampleSwitch"> 
    <label class="switch-paddle" for="exampleSwitch"> 
     <span class="show-for-sr float-right">NEW TOPICS</span> 
    </label> 
    </div> 
</div> 
<style> 
#newtopicbutton { 
font-size: 14px; 
} 
</style> 
<script> 
var open = 1; 
$('#newtopicbutton, .switch-paddle span').click(function() { 
    if (open===0) { 
     $('#new').css({ 
      'height': '440px', 
      'color': 'white', 
      'font-size': '44px' 
     }); 
     open=1; 
    } 
    else { 
     if (open===1) { 
      $('#new').css({ 
      'height': '48px', 
      'color': 'white', 
      'font-size': '44px' 
      }); 
     open=0; 
     } 
    } 

    console.log(open); 
}); 
</script> 
</body> 
</html>

出典

2016-07-19 15:40:07 GunWanderer

JavaScriptが他に変更された場合CSS

答えて

関連する問題