아코디언 질문이요

아코디언 질문이요

QA

아코디언 질문이요

본문

 

 
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('#cssmenu li.active').addClass('open').children('ul').show();
    $('#cssmenu li.has-sub>a').on('click', function(){
        $(this).removeAttr('href');
        var element = $(this).parent('li');
        if (element.hasClass('open')) {
            element.removeClass('open');
            element.find('li').removeClass('open');
            element.find('ul').slideUp(300);
        }
        else {
            element.addClass('open');
            element.children('ul').slideDown(300);
            element.siblings('li').children('ul').slideUp(300);
            element.siblings('li').removeClass('open');
            element.siblings('li').find('li').removeClass('open');
            element.siblings('li').find('ul').slideUp(300);
        }
    });
});
})(jQuery);
</script>        

Copy

 

아코디언 관련 제이쿼리 입니다.

 


    <li class="has-sub line-bottom"><a href="#">브랜드</a>
                <ul  class="sidebar-nav-e1" id="sidebar-menu2">
                    
                        <li class="has-sub line-bottom" id="brand_div">
                            <span class="brand_span">선택된 브랜드: </span>
                                <input type="text" name="serch_text" id="serch_text" class="serch_text">
                                </li>
                        <li class="sidebar-nav-e1 has-sub" id="sidebar-menu2">                
                <?php  ?>
                
                <li class="sidebar-nav-item">
                    <label class="checkboxnone"></label>
                        <a href="#">
                        <input type="checkbox" value="<?php echo $row['br_name'];?>" class="br_checkbox" data-id="<?php echo $row['br_code'];?>"><?php echo $row['br_name'];?>
                    </a>
                </li>

Copy

 

 

아코디언 제이쿼리 입니다.

클릭시에 아래로 아코디언 되어서 li를 전체로 보여주는데

 

li전체를 보여주는게 아닌 아코디언이 동작할때 li들이 300px정도로만 보여지게 가능할까요

이 질문에 댓글 쓰기 :

답변 1

        else {
            element.addClass('open');
            element.children('ul').slideDown(300);
            element.siblings('li').children('ul').slideUp(300);
            element.siblings('li').removeClass('open');
            element.siblings('li').find('li').removeClass('open');
            element.siblings('li').find('ul').slideUp(300);
        }

 

이 부분에  아래의 내용을 참고하여 적용하면 될것 같습니다.
element.children('ul').css({"width": "300px", "font-size": "20px"});

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT