9

私はOctoberCMSサイトを持っており、モバイルで表示するとリスト項目が折りたたまれるように、折りたたみ可能なリストでサイドバーを非表示にしようとしています。モバイルでないときは、以下の例のように展開されることを探しています:

http://codepen.io/anon/pen/GoqPJj

コードは以下のとおりです。

<div class="container">
    <div class="row">
        <div class="col s12 m6">
            <ul class="collapsible" data-collapsible="accordion">
                <li>
                    <div class="collapsible-header active"><i class="material-icons">filter_drama</i>First</div>
                    <div class="collapsible-body">
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="col s12 m6">
            This is the main page content. Here is some more content, and here is some even more content. It never seems to end as I add random text. Just one more sentence to make it a bit more complete.
        </div>
    </div>
</div>

上記の例を編集して目的の結果を生成する方法を知っている人はいますか?

4

1 に答える 1

1

これは、要件に従って機能するコードです。$( document ).width()ここでは 420と定義しています。要件に応じて変更できます。

if($( document ).width() < 420){
  $('.collapsible-body').hide();
  $('.active').removeClass('active');
  }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css">
    
    
    <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js'></script>

<div class="container">
	<div class="row">
		<div class="col s12 m6">
			<ul class="collapsible" data-collapsible="accordion">
				<li>
					<div class="collapsible-header active"><i class="material-icons">filter_drama</i>First</div>
					<div class="collapsible-body">
						<p>Lorem ipsum dolor sit amet.</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="col s12 m6">
			This is the main page content. Here is some more content, and here is some even more content. It never seems to end as I add random text. Just one more sentence to make it a bit more complete.
		</div>
	</div>
</div>

これがうまくいくことを願っています。

楽しみ ！！！！ありがとう

于 2015-12-28T16:26:04.450 に答える