"jQuery与Vue基础操作题(1): 单击标题实现元素显示、隐藏、互斥"

# jQuery与Vue基础操作总结 本文将总结关于jQuery和Vue的基础操作题，并针对题目要求给出相应的解答和示例代码。总结内容包括单击标题显示/隐藏div元素和单击标题使div元素互斥显示。 ## 题目要求 ### 题目1 (1) 单击标题使其下面的 div 元素显示或隐藏； ### 题目2 (2) 单击标题使其下面的 div 元素互斥显示。 ## 解答 ### 题目1 - 单击标题显示/隐藏div元素 #### jQuery解答 要实现单击标题显示/隐藏div元素，可以使用jQuery的`on()`方法和`toggle()`方法。以下是示例代码： ```javascript $(document).ready(function() { $('h2').on('click', function() { $(this).next('div').toggle(); }); }); ``` #### Vue解答 在Vue中，可以使用`v-on`指令和`v-show`指令来实现单击标题显示/隐藏div元素。以下是示例代码： ```html <div id="app"> <h2 v-on:click="showDiv = !showDiv">标题</h2> <div v-show="showDiv">内容</div> </div> <script> new Vue({ el: '#app', data: { showDiv: false } }); </script> ``` ### 题目2 - 单击标题使div元素互斥显示 #### jQuery解答 使用jQuery实现单击标题使div元素互斥显示可以结合使用`siblings()`方法和`toggle()`方法。以下是示例代码： ```javascript $(document).ready(function() { $('h2').on('click', function() { $(this).siblings('div').hide(); $(this).next('div').toggle(); }); }); ``` #### Vue解答 在Vue中，可以通过改变数据属性来实现单击标题使div元素互斥显示。以下是示例代码： ```html <div id="app"> <template v-for="(item, index) in items"> <h2 v-on:click="toggleDiv(index)">{{ item.title }}</h2> <div v-show="item.show">{{ item.content }}</div> </template> </div> <script> new Vue({ el: '#app', data: { items: [ { title: '标题1', content: '内容1', show: false }, { title: '标题2', content: '内容2', show: false }, { title: '标题3', content: '内容3', show: false } ] }, methods: { toggleDiv(index) { this.items.forEach((item, i) => { item.show = (i === index && !item.show); }); } } }); </script> ``` ## 总结 本文总结了关于jQuery和Vue的基础操作题目的解答方法。通过使用jQuery的`on()`方法和`toggle()`方法，以及Vue的`v-on`指令和`v-show`指令，可以实现单击标题显示/隐藏div元素和单击标题使div元素互斥显示的效果。这些基础操作对于学习和使用jQuery和Vue的开发者来说非常重要，希望本文能够对读者有所帮助。