小编Sha*_*aka的帖子

我有以下代码:

$('.div-1').on('click', function() {
  $('.block').addClass('animated');
});
$('.div-2').on('click', function() {
  $('.block2').addClass('animated');
});

html,
body {
  height: 100%;
}
.div-1 {
  display: inline-block;
  padding: 40px;
  background: tomato;
}
.div-2 {
  display: inline-block;
  padding: 40px;
  background: tan;
}
.block2 {
  background: green;
}
.animated {
  -webkit-animation: animateThis 0.2s ease;
  animation: animateThis 0.2s ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.block {
  background: red;
}
@-webkit-keyframes animateThis {
  0% {
    height: 0;
    width: 0;
  }
  100% {
    height: 100%;
    width: 100%;
  }
}
keyframes animateThis …

脚本

 function myfn(){
    var id= jQuery(this).find('input').val();
    alert(id);
  }

HTML

 <div>
   <img src=".." onclick="myfn()" >
   <input type=hidden value=1 >
 </div>

该函数是正确的,但id值显示未定义.我已经包含了所有必要的apis.

我的要求是允许用户在一个日历中选择多个日期范围,也不允许更改以前的日期选择.这怎么可能？下面是代码和小提琴的链接

HTML

<p>from</p>
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-datefrom">
<p>to</p>
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-dateto">

脚本

$( function() {
    var dateFormat = "mm/dd/yy",
      from = $( "#sproid-bookingcondition-datefrom" )
        .datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 1
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#sproid-bookingcondition-dateto" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });

    function getDate( element ) {
      var date; …

我有一个按钮并将其放在浏览器的顶部.因此,当鼠标单击或鼠标悬停在此定位按钮上时,我需要显示下拉列表.

HTML

  <div class="translator">
    <div class="translate-btn">Translator</div>
    <div class="translate-dropdown">
      <select>
        <option>Translate-1</option>
        <option>Translate-2</option>
        <option>Translate-3</option>
      </select>
    </div>
  </div>

CSS

.translator {
    position: absolute;
    top: 0;
    right: 10%;
    z-index: 9999;
}

.translate-btn {
  background-color: rgba(136, 121, 91, 0.8);
  border-radius: 0 0 5px 5px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 15px 5px;
  text-align: center;
  text-transform: uppercase;
}

使用此HTML我需要在用户点击或鼠标悬停在"translate-btn"时显示"translate-dropdown"DIV.

任何人都可以告诉我是否可以使用纯CSS或者我是否需要使用jquery？

希望有人可以帮助我.谢谢.

在我的html中,我有一个div,其中列出了7个图像,但在div中"仅适合"只有5个,所以我创建了2个按钮(bt1和bt2)来"水平滚动"这些图像.

我想要的是当我点击bt2并且第一个图像位于第一个位置时(在这种情况下左边是0px),图像不能进一步滚动,否则它们只是正常滚动.

代码段

$("#bt2").click(function()
 {
    if (($("#symbole").find("img").first().css({"left:0px"}))==true)
          {         
          }
    else{
          $("img").animate({
          "left":"+=100px"
          },
        420);
    }
 });

我使用 bootstrap 开发了一个模板，下面的Fiddle代表了预期的布局，当里面的内容达到窗口高度时，我希望黄色区域能够滚动，而右侧的红色面板保持固定。

HTML

<div class="header">
Header
</div>

<div class="content">

  <div class="left-panel">
      <div class="dummy-content">
          Results
      </div>
       <div class="dummy-content">
          Results
      </div>
       <div class="dummy-content">
          Results
      </div>
       <div class="dummy-content">
          Results
      </div>
      <div class="dummy-content">
          Results
      </div>
       <div class="dummy-content">
          Results
      </div>
       <div class="dummy-content">
          Results
      </div>
  </div>
  <div class="right-panel">
    Map
  </div>

</div>

<div class="footer">
Footer
</div>

CSS

body{
  text-align:center;
  width:100%;
  height:100%;
}
.header{
  background:black; 
  color:#fff;}

.left-panel{
    background:yellow;
    overflow-y: scroll;
    float:left;
    width:50%;
    height:100%;
}
.dummy-content{
    height:150px;
}
.right-panel{
    background:tomato;
    height:100%;
    float:right;
    width:50%;
}

.footer{
  background:grey; …