Question

目前我的输入字段从上到下显示。

如何更改此内容，使其显示在右侧？

＆＃13;

// Hide all the elements in the DOM that have a class of "box"
 jQuery('.box').hide();

 jQuery('.clickme').each(function() {
     jQuery(this).show(0).on('click', function(e) {
      
        e.preventDefault();
        
         jQuery(this).next('.box').slideToggle('fast');
    });
});

＆＃13;

/* line 84, sass/components/_form.scss */
.search {
  position: relative;
  float: right;
  color: #EAEAEA;
}
/* line 89, sass/components/_form.scss */
.search input {
  width: 250px;
  text-indent: 5px;
  line-height: 29px;
  padding: 0;
  border: 1px solid #EAEAEA;
  font-family: "Open Sans", sans-serif;
  padding: 12px 7px;
  font-size: 14px;
  font-weight: 900;
}
/* line 102, sass/components/_form.scss */
.search .fa-search {
  position: absolute;
  top: 3px;
  left: auto;
  right: 10px;
}

/* line 110, sass/components/_form.scss */
.box {
  float: right;
}

/* line 114, sass/components/_form.scss */
.clickme {
  float: right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="search">

<a href="#" class="clickme">
                                <img src="http://placehold.it/36x40" width="36" height="40" class="search-icon" />
                            </a>
                            
                            <div class="box">
                                <form role="search" method="get" class="search-form" action="#">
                                    <label>
                                        <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
                                    </label>
                                </form>
                            </div>
    
</div>

＆＃13;

Answer 1

包含jquery UI并将其更改为jQuery(this).next('.box').toggle('slide', {direction: 'right'});

尝试

 jQuery('.box').hide();

 jQuery('.clickme').each(function() {
     jQuery(this).show(0).on('click', function(e) {

        e.preventDefault();

         jQuery(this).next('.box').toggle('slide', {direction: 'right'});
    });
});

请参阅http://jsfiddle.net/tamilcselvan/hckrj218/2/

从右边滑入输入字段？

1 个答案: