JavaScript & jQuery - 푸터 패밀리사이트 셀렉트 커스텀 스타일(2)

■ 질문 남기실 때 꼭! 참고해주세요.

- 먼저 유사한 질문이 있었는지 검색해주세요.
- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.
- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.
- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.

해당 강의 응용하다 막히는 부분이 있어 질문 드립니다.

이 강의에 부분을 메뉴에서도 활용 할 수 있을것 같아 아래와 같이 만들어 보았습니다.

HTML

  <header>
    <div class="gnb">
      <div class="search_menu">
        <div class="dropdown">
          <div class="nav1 title">MENU1-1</div>
          <ul class="sub_nav1 sub_nav">
            <li><a href="#none">MENUI1-1</a></li>
            <li><a href="#none">MENUI1-2</a></li>
            <li><a href="#none">MENUI1-3</a></li>
            <li><a href="#none">MENUI1-4</a></li>
          </ul>
        </div>
        <div class="dropdown">
          <div class="nav2 title">MENU2-1</div>
          <ul class="sub_nav2 sub_nav">
            <li><a href="#none">MENU2-1</a></li>
            <li><a href="#none">MENU2-2</a></li>
            <li><a href="#none">MENU2-3</a></li>
            <li><a href="#none">MENU2-4</a></li>
          </ul>
        </div>
        <div class="dropdown">
          <div class="nav3 title">MENU3-1</div>
          <ul class="sub_nav3 sub_nav">
            <li><a href="#none">MENU3-1</a></li>
            <li><a href="#none">MENU3-2</a></li>
            <li><a href="#none">MENU3-3</a></li>
            <li><a href="#none">MENU3-4</a></li>
          </ul>
        </div>
      </div>
    </div>
  </header>

CSS

@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

* {
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 10px;
}

a{
  text-decoration: none;
}

header .search_menu {
  background-color: #9c9388;
  display: flex;
}

header .selectbox {
  position: relative; 
  border-right: 1px solid #c9c1b7;
}
header .selectbox:last-child{
  border:0;
} 
header .selectbox .select{
  width: 88px;
  height: 35px;
  padding:10px 12px;
  font-size: 1.2rem;
}
header .selectbox:last-child .select {
  width: 100px;
}

.dropdown {
  width: 8.4rem;
  cursor: pointer;
  position: relative; 
  border-right: 1px solid #c9c1b7;
}

.nav1,
.nav2,
.nav3 { background-size: 9px; background-color: #9c9388; color: #fff; padding: 1.2rem 1rem;}
.nav1::after,
.nav2::after,
.nav3::after{
  content: '\f107';
  font-family: fontawesome;
  position: absolute;
  right: 10px;
  font-size: 12px;
  line-height: 14px;
}

.sub_nav1,
.sub_nav2,
.sub_nav3 {
  position: absolute;
  list-style: none; 
  padding:0; 
  margin: 0; 
  left: 0; 
  top:100%; 
  width: 100%; 
  display: none; 
  z-index: 100;
}

.sub_nav1 li a,
.sub_nav2 li a,
.sub_nav3 li a {
  color: #fff; 
  display: block;
  padding: 7px; 
  background: #9c9388; 
  border-bottom: 1px solid #aaa;
}

.sub_nav1 li a:last-child,
.sub_nav2 li a:last-child,
.sub_nav3 li a:last-child {
  border: none;
}

JS 1 (정상작동) (개별적으로 class를 모두 지정하였습니다.)

$('.menu li').click(function(){
  $(this).children('.sub_menu').slideDown()
})
$('.menu li').click(function(){
  $(this).children('.sub_menu').slideUp()
})

$('.nav1').click(function(){
  $('.sub_nav1').stop().slideToggle()
  $('.sub_nav2').stop().slideUp()
  $('.sub_nav3').stop().slideUp()
  $(this).find('>ul').toggle()
})
$('.sub_nav1 li').click(function(){
  $(this).parent().stop().slideUp()
  $('.nav1').text($(this).text())
})

$('.nav2').click(function(){
  $('.sub_nav2').stop().slideToggle()
  $('.sub_nav1').stop().slideUp()
  $('.sub_nav3').stop().slideUp()
  // $(this).find('>ul').toggle()
})
$('.sub_nav2 li').click(function(){
  $(this).parent().stop().slideUp()
  $('.nav2').text($(this).text())
})

$('.nav3').click(function(){
  $('.sub_nav3').stop().slideToggle()
  $('.sub_nav1').stop().slideUp()
  $('.sub_nav2').stop().slideUp()
  // $(this).find('>ul').toggle()
})
$('.sub_nav3 li').click(function(){
  $(this).parent().stop().slideUp()
  $('.nav3').text($(this).text())
})

JS 2 (문제의 JS) (JS1와 같은 매커니즘 코드를 줄여 작성했습니다.)

//메뉴 토글
$('.title').click(function(){
  $(this).siblings('.sub_nav').slideUp()
  $(this).next().stop().slideToggle()
})

//메뉴 text 변경
$('.sub_nav li').click(function(){
$(this).parent().stop().slideUp()
$(this).parent().siblings('.title').text($(this).text())
})

이렇게 만들어서 메뉴1-1을 누르면 2-1과 3-1 이 들어가야하는데

3개가 모두 개별적으로 펼쳐집니다.

JS 1 처럼 class를 모두 직접 지정하면 정상적으로 되는데 너무 코드가 지저분해서 간단하게 지정을 하려고 작동을 확인 한 뒤 JS 2를 만들었는데 메뉴 text 변경 되는건 잘 되는데 메뉴 토글에서 막혔습니다.

$(this).siblings('.sub_nav').slideUp()

이 부분이 잘못된것 같은데 아무리 고쳐보고 검색해봐도 작동이 되지 않아 이렇게 여쭤 봅니다.