다른 드롭 다운 선택에서 div를 숨기려면 jQuery 또는 JS를 사용하십시오.

Question

드롭 다운에서 옵션을 선택하면 해당 선택과 관련된 단추 세트가 div에 나타납니다 (필요한 위치). 그런 다음 두 번째 div (#info, 녹색 배경)가 나타나고 div와 (의도 된대로) 내부에 나타나는 버튼과 관련된 내용을 표시하는 단추 중 하나를 클릭합니다.

내 문제는 이것이다 :

두 번째 DIV가 등장하면 내가 초기 드롭 다운로 돌아가서 다른 옵션을 선택하면, 나는 현재 유지 사라질 때까지 녹색 #info의 DIV를 원하는 표시되며 다른 드롭 다운 옵션을 선택 했음에도 마지막으로 클릭 한 버튼과 관련된 내용이 포함되어 있습니다.

누구나 제공해 주시면 감사하겠습니다. 좀 봐 주셔서 고마워요. 스마트 한 브레인 모두에 접근 해 주셔서 감사드립니다.

여기 여기 내 Fiddle

$(document).ready(function() { 
 
    $("select").change(function() { 
 
    $(this).find("option:selected").each(function() { 
 
     if ($(this).attr("value") == "red") { 
 
     $(".box").not(".red").hide(); 
 
     $(".red").show(); 
 

 
     } else if ($(this).attr("value") == "green") { 
 
     $(".box").not(".green").hide(); 
 
     $(".green").show(); 
 
     } else if ($(this).attr("value") == "blue") { 
 
     $(".box").not(".blue").hide(); 
 
     $(".blue").show(); 
 
     } else { 
 
     $(".box").hide(); 
 
     } 
 
    }); 
 
    }).change(); 
 

 
    $('.buttons button').click(function() { 
 
    $('#info').empty(); 
 
    $('#info').html($("#" + $(this).data('link')).html()); 
 
    }); 
 
});

.box { 
 
    padding: 20px; 
 
    margin-top: 20px; 
 
    border: 1px solid #000; 
 
    width: 200px; 
 
    height: 250px; 
 
    padding: 0px; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
#button-column { 
 
    text-align: center; 
 
    padding: 0px; 
 
} 
 
button { 
 
    font-size: 12px; 
 
    width: 100px; 
 
    height: 30px; 
 
    padding: 10px; 
 
    margin: 15px; 
 
} 
 
#info { 
 
    width: 250px; 
 
    height: 200px; 
 
    float: left; 
 
    display: inline-block; 
 
    text-align: center; 
 
    margin-left: 15px; 
 
    margin-top: 30px; 
 
} 
 
#dropdown { 
 
    width: 200px; 
 
    text-align: center; 
 
} 
 
.box h3 { 
 
    text-align: center; 
 
} 
 
.info { 
 
    background-color: green; 
 
    height: 200px; 
 
    border: 1px solid #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="dropdown"> 
 
    <h3>I am a...</h3> 
 
    <select> 
 
    <option>Select</option> 
 
    <option value="green">Dinosaur</option> 
 
    <option value="red">Unicorn</option> 
 
    </select> 
 
</div> 
 

 
<div class="green box"> 
 
    <h3>Today I am feeling...</h3> 
 
    <ul id="button-column" style="list-style: none;"> 
 
    <li class="buttons"> 
 
     <button data-link="content">Content</button> 
 
    </li> 
 
    <li class="buttons"> 
 
     <button data-link="mad">Mad</button> 
 
    </li> 
 
    <li class="buttons"> 
 
     <button data-link="hungry">Hungry</button> 
 
    </li> 
 

 
    </ul> 
 

 
</div> 
 

 
<div class="red box"> 
 
    <h3>Today I am feeling...</h3> 
 
    <ul id="button-column" style="list-style: none;"> 
 
    <li class="buttons"> 
 
     <button data-link="shy">Shy</button> 
 
    </li> 
 
    <li class="buttons"> 
 
     <button data-link="curious">Curious</button> 
 
    </li> 
 
    <li class="buttons"> 
 
     <button data-link="sleepy">Sleepy</button> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div id="info"> 
 

 
</div> 
 
<div id="hiddenDivs" style="display:none;"> 
 
    <!-- Dinosaur Select --> 
 
    <div id="content"> 
 
    <div class="info"> 
 
     <h3>Laying in the sun is nice.</h3> 
 
    </div> 
 
    </div> 
 
    <div id="mad"> 
 
    <div class="info"> 
 
     <h3>Go knock some trees over!</h3> 
 
    </div> 
 
    </div> 
 
    <div id="hungry"> 
 
    <div class="info"> 
 
     <h3>Go make a salad!</h3> 
 
    </div> 
 
    </div> 
 
    <!-- Unicorn Select --> 
 
    <div id="shy"> 
 
    <div class="info"> 
 
     <h3>I like to hide in the forest.</h3> 
 
    </div> 
 
    </div> 
 
    <div id="curious"> 
 
    <div class="info"> 
 
     <h3>Wait until everyone is asleep.</h3> 
 
    </div> 
 
    </div> 
 
    <div id="sleepy"> 
 
    <div class="info"> 
 
     <h3>Napping under a shady tree is the best.</h3> 
 
    </div> 
 
    </div>

Answer 1

인 업데이트 Fiddle을합니다.

변경 또는로드 할 때 #info div를 숨기고 표시해야합니다.

언제든지 드롭 다운이 변경되므로 #info div는 hide이됩니다. 그런 다음 누군가가 버튼을 클릭하면 show입니다. 그 show() 함수는 항상 실행되지만 버튼을 여러 번 클릭하면 무시됩니다.

}); 
    $("#info").hide(); // Hide 
}).change(); 

$('.buttons button').click(function(){ 
    $("#info").show(); // Show 
    $('#info').empty(); 
    $('#info').html($("#" + $(this).data('link')).html()); 
});