jquery slideメソッド使用時にcssメソッドを指定する方法

Question

###解決したいこと
サイドバーの各ウィジェットにclickイベントをつけているのですが、slideDownメソッドで隠している時cssメソッドでborder-bottomで区切りをつけたいです。
試しに、

$('.widget').children('ul').slideUp().css('border-bottom':'1px dashed blue');

としても、クリック自体動作しなくなってしまいました。

border-bottomではなく、また別の方法で良い方法がありましたら教えてください。

###jQueryコード

<!--ウィジェットクリックイベント-->
	 $(window).on('load resize',function(){
	  if($(window).width() <= 1000)
	  {
		if(!$('.widget').hasClass('open'))
	         {
		  $('.widget').children('ul').slideUp();
		  $('.widget').addClass('open');
		  $('.open').on('click',function(){
		    $(this).children('ul').slideToggle();
		});
	      }
	  }
	  else
	  {
	     if($('.widget').hasClass('open'))
	      {
	         $('.open').off('click');
		 $('.open').removeClass('open');
		 $('.widget').children('ul').slideDown();
 		 }
	      }
	   });

###image

このようなウィジェットになっているので、各ウィジェットがわかりやすいように区切りとして線を入れたいのです。

Answer 1

とりあえず2点

• cssの指定

.css({'border-bottom':'1px dashed blue'});

としてください、

• 表示の問題

slideUpしたものはdisplay:noneになるので、borderを引いても表示されないのでは？

sample

とりあえず親にボーダーを引く仕様のsampleだけ上げておきます
なにをトリガーにするかよくわからないのでボタンにしておきます

<script>
$(function(){
  $('.open').on('click',function(){
    var ul=$('.widget').children('ul');
    var flg=ul.css('display')=='none';
    $.when(
      ul.slideToggle()
    ).done(
      function(){ul.parent().css({'border-bottom':flg?'':'1px dashed blue'})}
    );
  });
});
</script>
<input type="button" value="open" class="open">
<div class="widget">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>
<div>test5</div>

Comments

[yambejp]

sampleつけときます

[kotori_00]

回答ありがとうございます。
if(!$('.widget').hasClass('open'))
{
$('.widget').children('ul').slideUp();
$('.widget').addClass('open');
$('.open').on('click',function(){
var ul=$('.widget').children('ul');
var flg=ul.css('display')=='none';
$.when(
ul.slideToggle()
).done(
function(){ul.parent().css({'border-bottom':flg?'':'1px dashed #cb4852'})}
);
});
}

でクリックしてslideUp();した時のみborder-bottomをつけることができました。
ですが、なぜかborder-bottomにカラー指定をしても白い色で表示されてしまいます。

それと、
'border-bottom':flg?'
の'flg?'とは何を指しているのでしょうか。

Answer 2

if($(window).width() <= 1000) でそれぞれ違うClassを指定（addClass/removeClass）して、CSSで処理されてはいかがでしょうか。