Question

我有这个HTML

<div id="text-slide"><ul class="menu">
  <li><a href="" id="toggle1">Webdesign</a>
</li><div class="toggle1" style="display:none;width:45%; position:absolute;left: 16%; top:0;"><h2>Webdesign</h2><p>Test</p></div>
 <li>
 <a href="" id="toggle2">Design de identidades</a>
</li><div class="toggle2" style="display:none;width:45%;position:absolute;left: 16%; top:0;"><h2>Design de identidades</h2><p>Test</p></div></ul></div>

我为两个分开的元素

创建了这个jquery

 $(function() {
        $('#toggle1').click(function() {
        $(".toggle1").toggle("slow");
        $(".toggle2").hide("slow");
        $(this).addClass('current');

        $("#toggle2").removeClass('current');

        return false;
     });
      $('#toggle2').click(function() {
        $(".toggle2").toggle("slow");
        $(".toggle1").hide("slow");
        $(this).addClass('current');

        $("#toggle1").removeClass('current');

        return false;
     });                               
});

有人知道如何添加许多元素并简化jquery脚本吗？我尝试使用相同的jquery添加第三个元素但不适用于我。

Answer 1

这样的东西？

HTML

<div class="toggle">toggle</div>
<div class="content">content</div>
<div class="toggle">toggle</div>
<div class="content">content</div>
<div class="toggle">toggle</div>
<div class="content">content</div>
<div class="toggle">toggle</div>
<div class="content">content</div>

CSS

.content {display:none;}

JS

$('.toggle').click(function(){
    if($(this).next('.content').is(':hidden')) {
        $('.content').slideUp();
        $(this).next('.content').slideDown();
    }
});

Updated fiddle

Answer 2

你应该使用选择器not（）来完成这项任务，它对我来说很有用。

var Foo = React.createClass({
  getInitialState: function () {

    return {
      type: 'text'
    };
  },
  onFocus: function () {

    this.setState({
      type: 'date'
    });
  },
  onBlur: function () {

    this.setState({
      type: 'text'
    });
  },
  render: function () {

    return(
      <input 
        type={ this.state.type } 
        onFocus={ this.onFocus } 
        onBlur={ this.onBlur } 
        placeholder="Enter your date here."
      />
    )
  }
});

React.render(<Foo/>, document.body);

UPDATED FIDDLE HERE

Jquery切换元素

2 个答案: