0

I'm using Zurb Foundation as a framework, and jQuery to show/hide a <div> containing a Foundation based on a <select> dropdown box. The jQuery is pretty simple:

$(document).ready(
  function()
 {
  $('.dropdown').hide();
  $('#divsp1').show();
  $('select').data("previous-value", $('select').val());
  $('select').change(function() {
    var previousValue = $(this).data("previous-value");
    $('#divsp' + previousValue).hide();
    $('#divsp' + $(this).val()).show();
    $(this).data("previous-value", $(this).val());
  });
}
);

Simplified HTML is as follows:

<div id="divsp1" class="dropdown">
  <div class="section-container auto" data-section>
    <section class="active">
      <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
      <div class="content" data-section-content>
        <p>Content of section 1.</p>
      </div>
    </section>
    <section>
      <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
      <div class="content" data-section-content>
        <p>Content of section 2.</p>
      </div>
    </section>
  </div>
</div>
<div id="divsp2" class="dropdown">
  <div class="section-container auto" data-section>
    <section class="active">
      <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
      <div class="content" data-section-content>
        <p>Content of section 3.</p>
      </div>
    </section>
    <section>
      <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
      <div class="content" data-section-content>
        <p>Content of section 4.</p>
      </div>
    </section>
  </div>
</div>

<form autocomplete="off">
<select>
  <option value="1">1</option>
  <option value="2">2</option>
</select>
</form>

Selecting anything other than the initial value causes the selected <div> to disappear. It only reappears if the window is resized. I've also captured this behavior in a video here.

Once the window is resized, the jQuery select functions as desired. I'm seeing this issue in Firefox and Chrome, both on Windows and Mac OS X.

Is there something wrong with my jQuery that is causing this issue?

EDIT

I narrowed this down to an issue with Foundation and jQuery. I created a site with vanilla Foundation and tried to do the same thing: <div> containing Foundation Panels that are switchable via jQuery. No luck. I'll have to find another way to achieve the same thing.

4

2 回答 2

0

你能不能用这个来检查一下..

please this line......
$('.subProductBox#div' + $(this).val()).show();

with this........

$('#div'+ $(this).val()).show();

I hope this will be helpful
于 2013-09-28T18:39:14.843 回答
0

我没有仔细阅读文档。在 .js 文件中添加一个简单的行来修复它：

$(this).foundation('section', 'reflow');

我在Section 文档中找到了这一行。

于 2013-09-30T17:29:40.310 回答