在输入字段上使用onfocus打开手风琴

Open accordion using onfocus on input field

本文关键字：onfocus 手风琴 输入 字段      更新时间：2023-09-26

我试图在onfocus上打开手风琴输入字段。我尝试过，但它没有发生。我想打开手风琴取决于哪个输入框是焦点

<input type="text" id="rnv" class="form-control"  placeholder="Ex: Roasted Aparagus and Musherooms" onfocus="accordion('rntip',this)">
<textarea class="form-control"  id="in" rows="6" placeholder="Ex: bunch fresh asparagus, trimmed; 2 sprigs fresh rosemary, minced" onfocus="accordion('intip',this)"></textarea>  
<script type="text/javascript">
function accordion(id,obj){
$(document).ready(function(){
        var accordion = id; 
        var accordionContent = accordion.next('.accordion-content');
        var accordionToggleIcon = $(this).children('.toggle-icon');
        // toggle accordion link open class
        accordion.toggleClass("open");
        // toggle accordion content
        accordionContent.slideToggle(250);
        // change plus/minus icon
        if (accordion.hasClass("open")) {
            accordionToggleIcon.html("<i class='fa fa-minus-circle'></i>");
        } else {
            accordionToggleIcon.html("<i class='fa fa-plus-circle'></i>");
        }
});     

}
</script>
 <div class="accordion-container"> <a href="#" class="accordion-toggle1" id="rntip"> <span class="toggle-icon"><i class="fa fa-plus-circle"></i></span>Recipe Name</a>
                  <div class="accordion-content">
                    <ul>
                      <li>Keep it short.</li>
                      <li>Include the name of the dish or its main ingredients.</li>
                      <li>Add a personal touch/get creative.</li>
                    </ul>
                  </div>
</div>

确保accordion引用的是accordion元素，而不仅仅是您传递的字符串。

将var accordion = id;改为var accordion = $("#"+id);

相关文章：