Question

我想知道我是否可以在没有按钮感觉的情况下将手风琴的标题设为按钮？这是手风琴标题的图片和里面的一些数据？我想点击标题中的文字导航到页面... 使用phonegap / cordova v1.9。 Visual Studio 2010快递用于windows phone / html，CSS，javascript（c＃）任何帮助将不胜感激:)我开放的解决方案，无论如何，包括jquery的

enter image description here

标题是 inboxentry1 POS556445
我把手风琴放在一堆叠在一起的div中...... 告诉我是否必须添加其他任何东西来帮助解决方案！
这是手风琴的一些HTML！

 <div id="AccordionContainer" class="AccordionContainer"></div>
    <div onclick="runAccordion(1)">
      <div class="Accordiontitle" onselectstart="return false;">
        <input type="button" href="ItemPages.html">inbox entry1</input>
        <br/>
        <a>POS556446x</a>      
      </div>
    </div>
    <div id="Accordion1Content" class="AccordionContent" style="background-color:white; color:grey;">
      <form>
        <p>
          <label for="create" >Created by :</label>
          <input type="text" style="margin-left:60px;" size="22" id="create"/>
        </p>
        <p>
          <label for="createdate" >Created Date :</label>
          <input type="text" style="margin-left:43px;" size="22" id="createdate"/>
        </p>
        <p>
          <label for="process" >Process name :</label>
          <input type="text" style="margin-left:36px;" size="22" id="process"/>
        </p>
        <p>
          <label for="transtype">Transaction type :</label>
          <input type="text" style="margin-left:20px;" size="22" id="transtype"/>
        </p>
        <p>
          <label for="lastact">Last action :</label>
          <input type="text" style="margin-left:61px;" size="22" id="lastact"/>
        </p>
        <p>
          <label for="lastuser">Last user :</label>
          <input type="text" style="margin-left:73px;" size="22" id="lastuser"/> 
        </p>
        <p>
          <label for="lastupd">Last update :</label>
          <input type="text" style="margin-left:55px;" size="22" id="lastupd"/> 
        </p>
        <p>
          <label for="duration">Duration :</label>
          <input type="text" style="margin-left:78px;" size="22" id="duration"/> 
        </p>
        <p>
          <label for="saved">Saved :</label>
          <input type="text" style="margin-left:93px;" size="22" id="saved"/>
        </p>
        <p>
          <label for="adhoc">Ad hoc user :</label>
          <input type="text" style="margin-left:53px;" size="22" id="adhoc"/> 
        </p>
      </form>
    </div>

这是我的.js文件

    var ContentHeight = 200;
  var TimeToSlide = 250.0;

  var openAccordion = '';

  function runAccordion(index) {
  var nID = "Accordion" + index + "Content";
  if (openAccordion == nID)
  nID = '';

  setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" + openAccordion + "','" + nID + "')", 33);

  openAccordion = nID;
  }

  function animate(lastTick, timeLeft, closingId, openingId) {
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;

  var opening = (openingId == '') ? null : document.getElementById(openingId);
  var closing = (closingId == '') ? null : document.getElementById(closingId);

  if (timeLeft <= elapsedTicks) {
  if (opening != null)
  opening.style.height = ContentHeight + 'px';

  if (closing != null) {
  closing.style.display = 'none';
  closing.style.height = '0px';
  }
  return;
  }

  timeLeft -= elapsedTicks;
  var newClosedHeight = Math.round((timeLeft / TimeToSlide) * ContentHeight);

  if (opening != null) {
  if (opening.style.display != 'block')
  opening.style.display = 'block';
  opening.style.height = (ContentHeight - newClosedHeight) + 'px';
  }

  if (closing != null)
  closing.style.height = newClosedHeight + 'px';

  setTimeout("animate(" + curTick + "," + timeLeft + ",'" + closingId + "','" + openingId + "')", 33);
  }

Answer 1

如果你想点击一个输入字段导航到另一个页面，这里有一个简单的解决方法..只需将它绑定到像这样的mouseup事件（需要一个jQuery实现）：

更新代码

<强> HTML：

 <input class="followThisRel" type="button" rel="http://yoursite.com/">

JS：

$(function() {
    $('input.followThisRel').on('click', function() {
        var url = $(this).attr('rel');
        window.location = url;
    });
})

Answer 2

您可能想在此处进行一些更改。添加了几个类，并且按钮标记已更改，因为它不正确。您想删除手风琴的内联事件，并将其粘贴在下面提到的位置。

<div class="AccordionRun">
  <div class="Accordiontitle" onselectstart="return false;">
    <input class="AccordionLink" type="button" href="ItemPages.html" value="inbox entry1">
    <br/>
    <a>POS556446x</a>      
  </div>
</div>

然后你可以得到它并向它添加一个点击事件......

var goToPage = function(elem) {
    elem.onclick = function() {
        alert('Go to page...');
        window.location = elem.href;
    };
};

var runAccordion = function(elem) {
    elem.onclick = function() {
        alert('Run Accordion...');
        // Your accordion code goes here...
    }; 
};

var buttons = document.getElementsByTagName('input');
for(var i=0; i < buttons.length; i++) {
    if (buttons[i].className == 'AccordionLink') {
       goToPage(buttons[i]);             
    }
}

var divs = document.getElementsByTagName('div');
for(var i=0; i < divs.length; i++) {
    if (divs[i].className == 'AccordionRun') {
       runAccordion(divs[i]);             
    }
}

jsfiddle.net/FKt4K/2

是否可以将手风琴标题导航到新页面？

2 个答案: